Debounce&&Throttle

防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。

实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法

• debounce：把触发非常频繁的事件（比如按键）合并成一次执行。

• throttle：保证每 X 毫秒恒定的执行次数，比如每200ms检查下滚动位置，并触发 CSS 动画。

• requestAnimationFrame：可替代 throttle ，函数需要重新计算和渲染屏幕上的元素时，想保证动画或变化的平滑性，可以用它。注意：IE9 不支持。

---

Debounce

也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

简单实现：

var debounce = function(idle, action){
  var last
  return function(){
    var ctx = this, args = arguments
    clearTimeout(last)
    last = setTimeout(function(){
        action.apply(ctx, args)
    }, idle)
  }
}

Throttle

也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

简单实现：

var throttle = function(delay, action){
    var last = 0;
    return function(){
        var curr = +new Date();
        if(curr - last > delay){
            action.apply(this, arguments);
            last = curr;
        }
    }

}

参考：
- https://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/
- https://www.cnblogs.com/fsjohnhuang/p/4147810.html