为什么需要防抖节流:
开发中经常容易遇到一些持续发生的事件,比如scroll, resize, input, mousemove等,频繁的执行回调,造成页面性能的损耗,页面容易卡死,这时候就有两种解决方法,防抖和回流
防抖:
事件触发后的time时间内只执行一次。原理是维护一个延时器,规定在time时间后执行函数,如果在time时间内再次触发,则取消之前的延时器重新设置。所以回调只在最后执行一次。
clearTimeout() 方法
可取消由 setTimeout() 方法设置的 timeout
语法:clearTimeout(id_of_settimeout)
id_of_settimeout:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
function debounce(interval = 400, immediate = false) {
let timer
return function (fn) {
if (immediate) {
immediate = false
fn && fn()
return
}
window.clearTimeout(timer)
timer = window.setTimeout(() => {
window.clearTimeout(timer)
fn && fn()
}, interval)
}
}
页面调用:
**引用:**
mounted() {
this.debounceHandler = debounce(400, false)
},
**项目中具体使用:**
this.debounceHandler(() => {
...
})
// 此效果是事件触发的400ms后函数只执行一次
节流:
在事件触发过程中,每隔time执行一次回调
function throttle(interval = 400) {
let lastTime = 0
return function (fn) {
const currentTime = new Date().getTime()
if (currentTime - lastTime >= interval) {
lastTime = currentTime
fn && fn()
}
}
}