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节流与防抖的代码实现的主要内容,如果未能解决你的问题,请参考以下文章