柚子讴歌的博客

函数的防抖与节流

2018/06/12

函数防抖

函数防抖指的是多次触发某一事件之后,事件只执行一次,而且是最后一次触发的时候(可以理解为函数执行过一次之后,在等待时间段内不能再次执行;如果在等待时间内触发函数,就重新计算等待时间)【参考坐电梯】

使用场景:

  • 文本输入验证
  • mousemove和mousedown事件

demo:

const _.debouce = (func,wait) => {
    let timer;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(func,wait);
    }
}

函数节流

函数节流指一个函数在一定时间内只能执行一次【参考过地铁闸机】

使用场景:

  • 频繁点击提交
  • 搜索框联想功能
  • 滚动加载

demo:

const _.throttle = (func,wait) => {
    let timer;
    return () => {
        if(timer){
            return;        
        }
        timer = setTimeout(() => {
            func();
            timer = null;
        },wait);
    }
}

异同

相同点:

  • 都是通过使用setTimeout实现
  • 防抖和节流的目的都是降低回调执行频率,节省计算资源

不同点:

  • 防抖是在一段连续操作结束之后处理回调,利用clearTimeout和setTimeout实现;而节流是在一段连续操作中,每一段时间只执行一次,在频率较高的事件中使用来提高性能。
  • 防抖关注的是一定时间内的连续触发,只在最后一次执行;节流侧重于一段时间内只执行一次。

具体可参考:https://juejin.im/entry/58c0379e44d9040068dc952f

CATALOG
  1. 1. 函数防抖
  2. 2. 函数节流
  3. 3. 异同