防抖与节流函数 | 神族九帝

防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。

区别在于，防抖函数只会在高频事件结束后 n 毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔 n 毫秒调用一次函数。

防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout
节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null

防抖函数

触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。

防抖应用场景

scroll 事件滚动触发事件
搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
表单验证
按钮提交事件。
浏览器窗口缩放，resize 事件(如窗口停止改变大小之后重新计算布局)等。
登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存
input 搜索

// 防抖函数
function debounce(cb, deplay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      cb(...args);
    }, deplay);
  };
}

节流函数

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

节流的应用场景

DOM 元素的拖拽功能实现（mousemove）
搜索联想（keyup）
计算鼠标移动的距离（mousemove）
Canvas 模拟画板功能（mousemove）
射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
监听滚动事件判断是否到页面底部自动加载更多
scroll 事件，每隔一秒计算一次位置信息等
浏览器播放事件，每个一秒计算一次进度信息等
input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)

// 节流函数
function throttle(cb, deplay) {
  let timer;
  return (...args) => {
    if (timer) return;
    timer = setTimeout(() => {
      cb(...args);
      timer = null;
    }, deplay);
  };
}

示例

双剑合璧——加强版节流

现在我们可以把防抖和节流放到一起，为什么呢？因为防抖有时候触发的太频繁会导致一次响应都没有，我们希望到了固定的时间必须给用户一个响应，事实上很多前端库就是采取了这样的思路。

function debounceAndThrottle(fn, delay) {
    let timer = null;
    let last = 0;
    return function (...args) {
        clearTimeout(timer); // 清除之前的定时器
        let now = Date.now();
        if (now - last > delay) { // 如果距离上次执行的时间超过了delay，立即执行函数
            fn.apply(this, args);
            last = now;
        }
        timer = setTimeout(() => { // 设置定时器，在delay时间后执行函数
            fn.apply(this, args);
            timer = null;
        }, delay);
    }
}

防抖函数 ​

防抖应用场景 ​

节流函数 ​

节流的应用场景 ​

示例 ​

双剑合璧——加强版节流 ​

防抖函数

防抖应用场景

节流函数

节流的应用场景

示例

双剑合璧——加强版节流