版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/aliujiujiang/article/details/89453383
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。
函数防抖(Debounce)
定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。
原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。
//防抖函数
function debounce(fn,wait){
var timer;
return function(){
if(timer){
//再次触发清除定时器
clearTimeout(timer);
};
timer = setTimeout(function(){
fn.handle();
},wait);
}
}
function handle() {
//执行函数
}
window.addEventListener('scroll', debounce(handle, 1000));
函数节流(Throttle)
防抖有一个问题,那就是如果事件一直在触发,那么执行函数永远都得不到执行。这种情况下,函数节流此时是较好的方法。它与防抖最大的区别就是,无论事件触发多么频繁,都可以保证在规定时间内可以执行一次执行函数。
function throttle(fn,wait){
var lastTime = new Date().getTime();
return function(){
var curTime = new Date().getTime();
if((curTime - lastTime) < wait){return;};
lastTime = curTime;
fn.handle();
}
}