防抖 和 节流

两者都是优化高频率执行js代码的一种方式。

• 节流（throttle）：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率
  举例：
  就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。
  实现：
  思路：每次触发事件时都判断是否有等待执行的延时函数
  代码：

  function throttle(func, wait){
    var timer
    return function(){
      if(!timer){
        timer = setTimeout(()=>{
           timer = null
            func.apply(this, arguments) //改变this的指向，不然this会指向window
        }, wait)
      }
    }
  }
  
  function testThrottle() {
    console.log('测试节流成功');
  }
  // 取页面中的input 测试节流
  var dom = document.getElementById('input');
  dom.addEventListener('input', throttle(testThrottle, 2000));
  

• 防抖（debounce）：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间
  举例：
  预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。
  实现：
  思路：每次触发事件时，都取消之前的延迟调用方法，多次调用函数只返回最后一次调用的结果。
  代码:

  function debounce(fn, wait){
    //创建一个标记用来存放定时器的返回值
    let timer = null
    return function(){
      //当事件被触发时，将前一个定时器给清理掉
      clearTimeout(timer)
      //然后重新创建一个定时器，实现最后一次触发
      timer = setTimeout(()=>{
        fn.apply(this, arguments)
      }, wait)
    }
  }
  function testDebounce() {
    console.log('测试防抖成功');
  }
  // 取页面中的input 测试防抖
  var dom = document.getElementById('input');
  dom.addEventListener('input', debounce(testDebounce)); 
  

上述代码之所以用fn.apply(this, arguments)是因为apply可以改变this的指向，如果不改变的话，this会指向window。

• 区别：节流是将多次执行变成每隔一段时间执行，而防抖是将多次执行变成最后一次执行。