函数防抖和函数节流
程序员文章站
2022-07-02 20:24:35
...
函数防抖:多次触发事件后,事件处理函数只执行一次并且在触发结束时执行。比如客户端用户上传或下载数据时,在用户多次点击只触发一次。
function debounce(method, delay) {
let timer;
return function () {
let args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(()=> {
method.apply(this, args)
}, delay);
}
}
函数节流:当我们做图片懒加载(lazyload)时,需要通过滚动位置,实时显示图片时,如果使用防抖函数,懒加载(lazyload)函数将会不断被延时,只有停下来的时候才会被执行,对于这种需要实时触发事件的情况,就显得不是很友好了。
函数节流触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。
function throttle(method, mustRunDelay) {
let timer,
start = Date.now();
return function loop() {
let now = Date.now(),
self = this,
args = arguments;
if(now - start >= mustRunDelay) {
method.apply(self, args);
start = now;
} else {
clearTimeout(timer);
timer = setTimeout(function() {
loop.apply(self, args);
}, 50)
}
}
}