防抖与节流

防抖

防抖要解决的问题：阻止一个事件被频繁触发。
例如：当我们监听浏览器的滚动条事件时，如果不做防抖，就会发生滚动一次鼠标滚轮，事件被触发6-8次。
应用场景：等用户的鼠标滚轮滚动到某一个地方，停止滚动1秒之后才执行函数。
解决思路：设置一个触发函数执行的「等待时间」，当「等待时间」结束之后才可以被执行。

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) // 不会触发一次（我把函数防抖看出技能读条，如果读条没完成就用技能，便会失败而且重新读条）

节流

节流要解决的问题：和防抖一样，都是阻止一个事件被频繁触发
区别：防抖是「等待时间」结束之后再执行函数，而节流是先执行函数，然后再计时，确保计时没有结束之前函数不会再次执行。
应用场景：用户在网页的Input表单输入框中按住了某一个按键，但是我们要做到函数不被连续触发，而是每1秒执行1次

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)