4.防抖节流实现.md

防抖 debounce

Note

函数防抖就是在函数需要频繁触发的情况下，只有足够的空闲时间，才执行一次。

典型应用:

• 百度搜索框在输入稍有停顿时才更新推荐热词。
• 拖拽

function debounce(handler, delay){

  delay = delay || 300;
  var timer = null;

  return function(){

    var _self = this,
        _args = arguments;

    clearTimeout(timer);
    timer = setTimeout(function(){
      handler.applay(_self, _args);
    }, delay);
  }
}

节流 throttle

Note

一个函数只有在大于执行周期时才执行，周期内调用不执行。好像水滴积攒到一定程度才会触发一次下落一样。

典型应用：

• 抢券时疯狂点击，既要限制次数，又要保证先点先发出请求
• 窗口调整
• 页面滚动

function throttle(handler, wait){

  wait = wait || 300;
  var lastTime = 0;

  return function(){
    var _self = this,
    _args = arguments;

    var nowTime = new Date().getTime();
    if((nowTime - lastTime) > wait){
      handler.apply(_self, _args);
      lastTime = nowTime;
    }
  }
}

节流与防抖的本质

以闭包的形式存在，通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息，最后用定时器或时间差来控制事件的触发频率。