函数节流和函数防抖,两者都是优化高频率执行js代码的一种手段。
以监听页面滚动为例,分别看一下普通滚动,函数节流,函数防抖三者的实现效果。
函数节流:是指在高频事件触发期间,n秒内函数只会执行一次。
使用场景:click、onMouseOver,onMouseMove,resize,input,scroll等
// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
timer = setTimeout(function(){
console.log("函数防抖");
}, 1000);
};
函数防抖的要点:也需要一个定时器来辅助实现代码延迟执行。如果计时未完之前,方法被多次触发,则清除上次记录的定时器标记,重新开始。
若计时完毕,没有继续触发方法,则执行逻辑代码。
函数防抖
函数防抖,是指触发高频事件n秒后函数会执行一次,如果n秒内高频事件被再次触发,则重新计算时间;在整个过程中,事件函数只会被执行一次。
使用场景:click、onMouseOver,onMouseMove,resize,input,scroll等
// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
if(!canRun){
// 判断是否已空闲,如果在执行中,则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log("函数节流");
canRun = true;
}, 1000);
}
函数节流的要点:声明一个标志位,设置执行的时间间隔,记录当前代码是否在执行,如果空闲,则可以正常触发方法执行,反之则取消这次方法执行,直接return。