一直以来对于防抖和节流的不是很清楚,只是知道他们的作用,今天区分一下概念。
节流(throttle)的作用是在用户动作时每隔一定时间执行一次回调。就像水是以水滴的形式流出,水滴只有到一定重量才会有一滴水流出。
可以看作是连续做同一件事件后,才执行操作。
比如疯狂点击的时候,按钮点击事件只执行一次
防抖(debounce)的作用是在让在用户动作停止后延迟一定时间再执行回调。是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次。
可以看作是一件连续事件停止后,才执行操作。
比如疯狂输入的时候,输入完之后才进行操作
节流:
btn.addEventListener('click',throttle(1000,zengjia),false)
function zengjia(){
score.innerText =parseInt(score.innerText)+1;
console.log(score.value);
}
function throttle(delay,method){
var last=0;
return function(){
var now=new Date().getTime();
if(now-last>delay){
method.apply(this,arguments);
last=now;
}
}
}
防抖:
var eleself;
var timer;
function Start(ele){
alert(ele.value);
}
function debounce(self){
eleself=self;
clearTimeout(timer);
timer=setTimeout(function(){
Start.call(eleself,eleself);;
},1000)
}
txt.addEventListener('input',function(){
debounce(this);
},false)