深入理解防抖和节流函数

// 防抖函数
function debounce(fn, delay) {
let timer = null
return () => {
clearTimeout(timer)
timer = setTimeout(()=>{
fn()
}, delay)
}
}

实现思路如下，将目标方法（动作）包装在setTimeout里面，然后这个方法是一个事件的回调函数，如果这个回调一直执行，那么这些动作就一直不执行。为什么不执行呢，我们搞了一个clearTimeout，这样setTimeout里的方法就不会执行！为什么要clearTimeout呢，我们就需要将事件内的连续动作删掉嘛！待到用户不触发这事件了。那么setTimeout就自然会执行这个方法。

那么这个方法用在什么地方呢，就是用于input输入框架的格式验证，假如只是验证都是字母也罢了，太简单了，不怎么耗性能，如果是验证是否身份证，这性能消耗大，你可以隔170ms才验证一次。这时就需要这个东西。或者你这个是自动完全，需要将已有的输入数据往后端拉一个列表，频繁的交互，后端肯定耗不起，这时也需要这个，如隔350ms。

function debounce(func, delay) {
    var timeout;
    return function(e) {
        console.log("清除",timeout,e.target.value)
        clearTimeout(timeout);
        var context = this, args = arguments
        console.log("新的",timeout, e.target.value)
        timeout = setTimeout(function(){
          console.log("----")
          func.apply(context, args);
        },delay)
    };
};

var validate = debounce(function(e) {//需创建全局变量用于保存闭包里的变量，防止每次创建新变量后timeout也会创建新的

console.log("change", e.target.value, new Date-0) }, 380); // 绑定监听 document.querySelector("input").addEventListener('input', validate)

// 节流函数
function throttle(fn, delay) {
let timer = null
return ()=>{
if(timer !== null){
return
}
timer = true
setTimeout(()=>{
fn()
timer = null
}, delay)
}
}

防抖和节流

相同:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿.

不同:防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次.

防抖

定义:

指触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。

网上有这个比喻:函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会刷新技能,重新进行读条。

四个字总结就是延时执行

应用场景:

两个条件:
1,如果客户连续的操作会导致频繁的事件回调(可能引起页面卡顿).
2,客户只关心"最后一次"操作(也可以理解为停止连续操作后)所返回的结果.

节流

定义:

当持续触发事件时，在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件，则什么也不做,也不会重置定时器.

与防抖比较:

防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次.一般不会重置定时器. 即不会if (timer) clearTimeout(timer);(时间戳+定时器版除外)

应用场景:

两个条件:
1,客户连续频繁地触发事件
2,客户不再只关心"最后一次"操作后的结果反馈.而是在操作过程中持续的反馈.
例如:

鼠标不断点击触发，点击事件在规定时间内只触发一次(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

深入理解防抖和节流函数

推荐阅读