前端javascript的防抖和节流

一直以来对于防抖和节流的不是很清楚，只是知道他们的作用，今天区分一下概念。

节流(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)