函数去抖debounce和函数节流throttle原理

 

对于DOM事件，比如onscroll事件，你用户操作过快的情况下，如果这个dom响应函数一旦被触发立刻执行的话，恐怕来不及，网页会因为函数在不停的执行而卡住。所以有了函数节流和函数去斗来解决问题；

函数去抖debounce：

当事件被触发时，函数间隔几毫秒再执行，如果在这几毫秒中，事件还在触发那它就不执行，在大于等于这几毫秒后无事件触发则执行。

就比如说，一个点击事件，点击一次就alert,如果连续狂点12，只有最后一次才执行，前九次在时间间隔内被clear了。

$(".btn").οnclick=declay();

var timer;   //必须把timer设置为全局变量，否则clearTimeout每次清除的都将是函数内部本次的settimeout,而不是上一次的

function declay(){

clear(timer);

timer=setTimeout(function(){alert("hello");},500);

}

不过人家官方的喜欢搞这个函数，看着有点费劲，没那么直白，其实一个意思啦：

function debounce(method,delay){

var timer=null;

return function(){

var context=this, args=arguments;

clearTimeout(timer);

timer=setTimeout(function(){

method.apply(context,args);

},delay);

} }

function resizehandler(){

var n=1;

console.log(++n);

}

window.οnresize=debounce(resizehandler,500);

函数节流：如果事件被连续触发超过某个固定的时间，就执行一次，周而复始。

比如，在百度搜索问题，如果在搜索框onfocus超过3s, 搜索框就开始帮你自动补全，再间隔三秒再帮你查一次，，，，

function throttle(method,duration){

var begin=new Date();

return function(){

var context=this, args=arguments, current=new Date();

if(current-begin>=duration){

method.apply(context,args);

begin=current; } } }

function resizehandler(){

console.log(++n); }

window.οnresize=throttle(resizehandler,500);

函数节流和函数去抖的区别：比如在搜索框输入内容很长，去抖是，当你打了6s钟的文字，突然停下来2s钟，它才开始执行函数

节流是，当你打了2s钟的文字，你还没有停下来，还有4s钟要打，但是它不管你，它就要执行函数，然后你打第4s钟的时候它再执行一次，打第6s的时候再执行一次。两者的区别是，节流不考虑你的动作停没停，但凡你还在做这个操作，它就按规定的时间周期执行一次，而去抖是只有你停下来的时候才执行。（停下来指，在它规定的时间，比如它规定停下来2ms没有下一步操作就叫停下来）。