共计 1136 个字符,预计需要花费 3 分钟才能阅读完成。
前言
最近用到几次节流,明天封装了一下,不便当前应用,顺便写篇文章分享。
节流的概念
节流就是做完一件预先,须要期待一段时间后能力再做。个别利用在高频触发事件场景,比方用户始终按住“上”、“下”键抉择菜单,用 mousemove 事件拖拽窗口,或者下拉加载时,用节流管制页面滚动到底部时只触发一次加载数据办法等。
const waitFor = duration => { | |
var now, | |
first, | |
before = Date.now(); | |
return function() {now = Date.now(); | |
if (!first) {// 第一次触发有限期待 | |
before = now; | |
first = true; | |
return false; | |
} | |
if (now - before > duration) { | |
before = now; | |
return false; | |
} | |
return true; | |
}; | |
}; |
这是我封装的节流办法,节流英文单词不好记,我用 waitFor 代替,也不便了解。
利用示例
let wait = waitFor(500) | |
document.body.addEventListener("keydown", (e) => {if (e.code === "ArrowDown" && !wait()) {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,这样能够缩小查问申请的次数。
总结
节流防抖其实咱们很早就用过,只是没这个概念而已,刚看到这两个词的时候还认为是什么高大上的货色。
(~_,~)
正文完
发表至: javascript
2021-02-01