函数节流和防抖的区别

2019-07-02 440 阅读1分钟

这篇简小的文章仅仅是为了说明节流和防抖之间的区别，如果现在对这个问题傻傻的分不清，希望对你有帮助。

一节流（throttle）：

字面理解： 减速流动
联想： 关小水龙头
应用场景举例： 页面监听 scroll resize onmousemove 等事件
事件特性说明： 连续触发，就像水龙头一样源源不断地流动
代码关键点： if(!timeout){...}
定时器中传入的时间的意义： 让原本连续快速触发的事件每过这么长时间只触发一次，从而降低事件的触发频率，达到减速节流目的
最简代码示例：

function throttle(func, wait) {
    var timeout;
    return function() {
        if (!timeout) {
            timeout = setTimeout(function() {
                timeout = null;
                func()
            }, wait)
        }
    }
}
content.onmousemove = throttle(func, 200);

二防抖（debounce）：

字面理解： 防止抖动
联想： 帕金森综合征
应用场景举例： 搜索框的搜索联想等
事件特性说明： 用户可能只是想输入一个单词，可每个字母的输入都会触发 keyup 事件。可以理解为每个字母的输入就相当于用户的手抖了一次
代码关键点： clearTimeout(timeout)
定时器中传入的时间的意义： 如果两次连续触发的事件间隔小于这个时间，可以近似地认为前一次的触发为一次抖动，就 clear 掉，并且重新计时，直到下一个事件的间隔大于这个时间才真正触发
最简代码示例：

function debounce(func, wait) {
    var timeout;
    return function() {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait);
    }
}
input.oninput = debounce(func, 200);

友情链接：