防抖
持续触发事件时,当一定时间内没有再次触发时间,执行事件处理函数,若在设定时间内再次触发时间,那么延时,直到满足设定时间,即再次执行事件处理函数
节流
持续触发事件时,在一定时间内只调用一次事件处理函数
两者的区别:
防抖是指在事件处理函数执行过程中,不能再次触发,事件处理函数执行完毕之后,才能触发下次事件,而节流就是在一定时间内触发一次事件
eg
在下述代码中实现了防抖,设置标志量 flag ,仅当 flag 的值为真时,才能触发滚动事件
//平移函数
function animate(element,distance){
//distance 表示 element 的当前位置
clearInterval(element.timer);
element.timer = setInterval(function(){
var present=element.offsetTop;
var movement = 10;
movement = present < distance ? movement : -movement;
present += movement;
if(Math.abs(present-distance)>Math.abs(movement)){
//函数平移过程中,标志量 flag 值为 false
element.style.top = present+'px';
flag = false;
}
else{
clearInterval(element.timer);
//函数平移完成,flag 的值为 true
element.style.top=distance+'px';
flag = true;
}
},80);
}
//添加滚动事件
play.onmousewheel = function() {
clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
var e = e || window.event;
if(flag || flag==undefined){
if(e.wheelDelta>0){
if(count == 1){
count = 3;
play.style.top = -4*parseInt(window.innerHeight) + 'px';
animate(play,-parseInt(window.innerHeight)*3);
}
else{
count--;
animate(play,-parseInt(window.innerHeight)*count);
}
}
else if(e.wheelDelta<0){
if(count == 3){
count = 1;
play.style.top = 0 + 'px';
animate(play,-parseInt(document.documentElement.clientHeight));
}
else{
count++;
animate(play,-parseInt(document.documentElement.clientHeight)*count);
}
}
}
}