js节流与防抖的代码实现

Posted 一个样式调一天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js节流与防抖的代码实现相关的知识,希望对你有一定的参考价值。

前言

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

节流的概念

节流就是做完一件事后,需要等待一段时间后才能再做。一般应用在高频触发事件场景,比如用户一直按住“上”、“下”键选择菜单,用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,这样可以减少查询请求的次数。

总结

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

以上是关于js节流与防抖的代码实现的主要内容,如果未能解决你的问题,请参考以下文章

闭包与防抖节流

Flutter中的节流与防抖(过滤重复点击)

JavaScript函数节流和函数防抖的原理与区别

节流和防抖的实现及其应用

JS篇(防抖/节流)

javaScript节流与防抖