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

**典型应用**:
 - 百度搜索框在输入稍有停顿时才更新推荐热词。
 - 拖拽

```js
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]
> 一个函数只有在大于执行周期时才执行，周期内调用不执行。好像水滴积攒到一定程度才会触发一次下落一样。

**典型应用**：
 - 抢券时疯狂点击，既要限制次数，又要保证先点先发出请求
 - 窗口调整
 - 页面滚动
```js
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;
    }
  }
}
```



### 节流与防抖的本质

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

【编程题与分析题】防抖节流实现