魑魅魍魉
V1
2021/03/07阅读:28主题:红绯
防抖&节流
防抖
防抖(debounce)
-
触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间。
防抖可以用在哪些地方?
-
操作按钮、搜索框...
function debounce(handler, dely = 800){
let timer = null;
return function(){
clearInterval(timer);
timer = setTimeout(() => {
handler.apply(this, arguments);
}, dely);
}
}
节流
节流(thorttle)
-
高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率。
function throttle(handler, wait = 800) {
let lastTime = 0;
return function () {
let newTime = new Date().getTime();
if (newTime - lastTime > wait) {
handler.apply(this, arguments);
lastTime = newTime;
}
}
}
防抖&节流
防抖和节流的区别
-
防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
为什么需要防抖和节流?
-
缓解服务器压力,防止用户频繁操作导致向服务器多次发送请求。 -
我们经常会需要绑定一些持续触发的事件,但是我们并不希望在事件持续触发的过程中那么频繁地去执行函数。
作者介绍
魑魅魍魉
V1