函数节流和函数防抖

函数防抖和函数节流是在时间轴上控制函数的执行次数

一、函数防抖(debounce)
      概念：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；
      案例：如果有人进电梯（触发事件），那电梯将在10秒钟后触发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）；
      分析1：假设观察的总时间是10秒钟，规定1秒作为一次事件的最小间隔时间，如果触发事件的频率是0.5s/次，那么在函数防抖情况下，回调就没法执行了，因此始终无法等够一秒钟事件就被再次触发了，所以最终没有一次事件是成功的；

函数防抖
      分析2：假设观察的总时间是10秒钟，规定1秒作为一次事件的最小间隔时间，如果触发事件的频率是2s/次，那么在函数防抖情况下，每隔2秒执行一次事件，因为2s/次已经大于了规定的最小时间，所以每计时两秒便触发一次；
函数防抖
      应用场景：对于函数防抖，有以下几种应用场景，总的来说，适合多次事件一次响应的情况；

• 给按钮加函数防抖防止表单多次提交；
• 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数；
• 判断scroll是否滑到底部，滚动事件+函数防抖；
        代码：

// 之所以返回一个函数，因为防抖本身更像是一个函数修饰，所以就做了一次函数柯里化，里面也用到了闭包，闭包的变量是timer
function debounce(fn, wait) {
  var timer = null;
  return function () {
      var context = this
      var args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}

var fn = function () {
  console.log('boom')
}

setInterval(debounce(fn,500),1000) // 第一次在1500ms后触发，之后每1000ms触发一次

setInterval(debounce(fn,2000),1000) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）

二、函数节流(throttle)
      概念：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效；
      案例：我们知道目前的一种说法是当1秒内连续播放24张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放中基本是以每秒24张的速度播放的，为什么不播放100张或更多是因为24张就可以满足人类视觉需求的时候，100张就会显得很浪费资源；
      分析1：假设观察的总时间是10秒钟，规定1秒作为一次事件的最小间隔时间，如果触发事件的频率是0.5s/次，那么在函数节流的情况下，每一秒钟就有一次触发事件被作废，即最终控制成1s/次；

函数节流
      分析2：假设观察的总时间是10秒钟，规定1秒作为一次事件的最小间隔时间，如果触发事件的频率是2s/次，那么在函数节流的情况下，每隔两秒执行一次事件，因为2s/次大于了最小时间规定，所以每一次触发都生效；
函数节流
      应用场景：对于函数节流，有以下几种应用场景，总的来说，适合大量事件按时间做平均分配触发；

• 游戏中的刷新率；
• DOM元素拖拽；
• Canvas画笔功能；

// 1s打出一个boom
function throttle(fn, gapTime) {
  let _lastTime = null;

  return function () {
    let _nowTime + = new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn();
      _lastTime = _nowTime
    }
  }
}

let fn = ()=>{
  console.log('boom')
}

setInterval(throttle(fn,1000),10)

参考链接：JS函数防抖和函数节流