JavaScript函数的防抖和节流

防抖和节流都是为了防止函数被多次调用。

在实际业务中非常有用！

1.可以减少服务端压力。

2.防止用户获取冗余信息，如：接受到多次请求返回的结果。

3.提高业务稳定性，如：表单的提交。

...

总之就是替用户的手贱买单【狗头】。

一，防抖

        正如其字面意义，用户不小心手抖了多点了几次，我们的目标就是让这几次重复的调用只有一次生效。显然我们不知到用户到底会手抖触发多少下，那就让最后一次生效吧。

思路：时间间隔内该函数若是重复触发，便去销毁上次任务。

/**
 * @description: 对目标函数进行防抖封装
 * @param fn 目标函数
 * @param timeOut 时间间隔
 * @return 防抖函数
 */

function debounce(fn, timeOut=500){
  let timer = null;
  // args 接受入参
  return (...args)=>{
    // 销毁前一次定时器任务
    clearTimeout(timer);
    // 记录定时器任务的id
    timer = setTimeout(() => {
      fn(...args);
    }, timeOut);
  }
}

原理：setTimeout 会将回调函数在给定的时间后推入消息队列，同时他会立即返回一个ID，通过这个ID我们便可以对其进行销毁。

拓展：有时候网卡，用户不耐烦就不停的点，但是我们一次都没有为用户实际去调后台，常见的办法是用户点n次后我们跳出一个弹窗去提示"请勿重复点击"，或者点击n次后我们额外调一次。

二，节流

       防抖是：间隔小于n秒的连续调用全部失败；相对的节流是：间隔小于n秒的连续调用能成功，但只能成功一次

思路：调用一次后让目标函数休眠一段时间，定时再去唤醒目标函数。

/**
 * @description: 对目标函数进行节流封装
 * @param fn 目标函数
 * @param timeOut 时间间隔
 * @return 节流函数
 */

function throttle(fn, interval = 1000){
  // 记录上次调用的时间戳
  let lastcall = 0;
  // args 接受入参
  return (...args) => {
    // 该次调用的时间戳
    let now = new Date().getTime();
    // 间隔大于给定值才能调用成功
    if(now - lastcall > interval){
      lastcall = new Date().getTime();
      fn(...args);
    }
  }
}

原理：通过对比上次调用和该次调用的时间戳差值，得知我们是否有权限调用目标函数。

拓展：同样也可以通过定时器去实现。相对与防抖，节流的业务便少了些，游戏中倒是常见，如技能冷却，子弹射速等等。

---

tips：

        1.上述的防抖、节流都是通过闭包实现的。

        2. 存在的一个问题，被同一工具封装后的函数，他们会共享同一个时间戳。可以改写成构造函数的形式来解决。

---

2022/09/13 更新

 

补充一个Promise版的防抖。

export function promiseThrottle(promise, { delay = 1000 } = {}) {
  if (typeof delay !== 'number') throw new Error();
  if (delay < 0) throw new Error();

  let timeoutID = 0;

  return async (...args) => {
    clearTimeout(timeoutID);

    return await new Promise(resolve => {
      timeoutID = setTimeout(async () => {
        resolve(promise(...args));
      }, delay);
    });
  };
}

注意点：

参数promise，是一个returnable的函数，返回类型为Promise。

可选参数delay，是预设的时间间隔。

你可能会担心，每次调用节流封装后的函数都会new一个Promise实例，如果被clearTimeout阻断了resolve，是否会造成内存泄漏呢？答案是不会的，可以使用 queryObjects(Promise) 来查看。

节流明天我一定补上[doge]