防抖节流的原理及方案

防抖

防抖原理

有些事件，比如鼠标移动、滚动条滚动、键盘键弹起、窗口大小改变等，一旦触发，就会在短时间内触发好几次，如果这时候进行计算或者ajax请求，就会浪费计算机资源，甚至导致卡顿、奔溃，因此要给事件触发加一个延迟处理。当事件触发时，如果已有定时器，那么就要清除已有的定时器，重新设置定时器，因此如果事件不停的触发，定时器就不停的被清除、重新设置，因此也就无法执行事件函数，直到事件不再触发，才会让定时器触发，执行定时器中的事件函数。为了改变函数体内的 this 指向，要用 func.apply(this, arguments)，arguments 是为了给事件函数传递参数，特别是 event。

防抖方案

var debounceNode = document.querySelector('#debounce')
var count = 0
debounceNode.onmousemove = debounce(doSomeThing, 300)
​
function doSomeThing(event) {
    count++
    this.innerHTML = count
}
​
function debounce(func, wait) {
    let timeout
    return function() {
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
            func.apply(this, arguments)
        }, wait)
    }
}

 

节流

节流原理

有些时候，我们希望事件触发的时候，事件函数定时响应一次，而不是跟着一起触发，同上。跟防抖不同的是，防抖是在事件停止触发之后，才触发定时器。而节流是每隔一段时间触发一次定时器。具体应用如表单验证、搜索框响应。

节流有两种方案：定时器方案和时间戳方案。

定时器方案的思路是，当事件高频触发时，如果当前定时器为 null，则创建定时器，这时候已有定时器了，就不做任何处理。当定时器触发时，把定时器置为 null，同时执行事件响应函数。

时间戳方案的思路是，当事件高频触发时，记录当前时间戳，把当前时间戳减去上一次时间戳（上一次执行事件响应函数的时间），如果小于延时时间，则不做任何处理，如果大于延时时间，则把上一次时间戳设置为当前时间戳，同时执行时间响应函数。

节流方案

var throttleNode = document.querySelector('#throttle')
var count = 0
throttleNode.onmousemove = throttle(doSomeThing, 300)
​
function doSomeThing(event) {
    count++
    this.innerHTML = count
}
​
// 定时器方案
function throttle(func, wait) {
    let timeout
    return function() {
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null
                func.apply(this, arguments)
            }, wait)
        }
    }
}
​
// 时间戳方案
function throttle(func, wait) {
    let triggerTime = 0
    return function() {
        let nowTime = new Date().getTime()
        if (nowTime - triggerTime > wait) {
            triggerTime = nowTime
            func.apply(this, arguments)
        }
    }
}