js节流与防抖的代码实现

Posted 2021-10-09 一个样式调一天

前言

最近用到几次节流，今天封装了一下，方便以后使用，顺便写篇文章分享。

节流的概念

节流就是做完一件事后，需要等待一段时间后才能再做。一般应用在高频触发事件场景，比如用户一直按住“上”、“下”键选择菜单，用mousemove事件拖拽窗口，或者下拉加载时，用节流控制页面滚动到底部时只触发一次加载数据方法等。

const waitFor = (duration) => {
    var now, first, before;
    return function () {
      now = Date.now();
      if (!first) {
        first = before = now;
        return false;
      }
      if (now - before >= duration) {
        before = now;
        return false;
      }
      return true;
    };
};

这是我封装的节流方法，节流英文单词不好记，我用waitFor代替，也方便理解。

应用示例

let wait = waitFor(500)
document.body.addEventListener("keydown", (e) => {
    if(wait()){
        return;
    }
    if (e.code === "ArrowDown") {
      console.log("do something~");
    }
});

上面的示例防止了用户一直按住键盘“下”键时，高频触发某事件。
这里是500毫秒触发一次，方便理解，应用时一般在100毫秒内。

防抖的概念

比如在搜索框应用中，用户要输入多个文字，你需要在用户输入文字时重新设置timeout的触发时间，等待用户输入完之后再触发搜索请求。

const willDo = function (duration) {
    let timeout, args, ctx;
    return function (fn) {
      ctx = this;
      args = Array.from(arguments).splice(1);
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        fn.apply(ctx, args);
      }, duration);
    };
};

应用示例

let will = willDo(1000);
input.addEventListener("input", (e) => {
    will((args1) => {
      console.log(args1);
      console.log("do something~");
      axios(url,...)
    }, "args1");
});

用户每次输入都用clearTimeout清除之前的timeout，然后重新设置timeout，这样可以减少查询请求的次数。

总结

节流防抖其实我们很早就用过，只是没这个概念而已，刚看到这两个词的时候还以为是什么高大上的东西。
(￣_,￣ )