节流与防抖

防抖

所谓防抖，就是指触发事件后在n秒内，函数只能执行一次，如果在这段时间内再次触发函数，则会重新计算函数执行时间

简单来说，举个例子，公交车来了，如果有乘客陆续上车，司机就不会开车，一直有乘客上车，司机就一直不会开车（n秒内触发了函数），等到没乘客上车了，司机才会开车（n秒内没触发函数）

定时器方案

 function debounce(callback, time) {
    //定时器的变量
    let timeId=null
    //返回一个函数
    return function (e) {
      //清空定时器
      if(timeId) clearTimeout(timeId)
      //启用定时器
      timeId=setTimeout(() => {
        //执行回调
        callback.call(this, e)
        //重置定时器变量
        timeId=null
      }, time)
    }
  }
  let input = document.querySelector('input')
  input.onkeydown = debounce(function (e) {
    console.log(e.keyCode);
  }, 1000)

节流

所谓节流，就是指函数在频繁触发时，每隔n秒执行一次

举个例子，有很多人坐过山车，过山车每15分钟一趟，尽管有很多人要坐过山车（函数频繁被触发），过山车依然是15分钟一趟（隔n秒执行一次）

时间戳方案

function throttle(callback,wait) {
    //定义开始时间
    let start=0
    return function () {
      //获取当前时间戳
      let now=Date.now()
      if(now-start>=wait){
        //若满足条件，则执行回调函数
        callback.call(this)
        //修改开始时间
        start=now
      }
    }
  }
  window.addEventListener('scroll', throttle(function(){
    console.log('a');
  },1000))	//在频繁触发滚动函数的场景下，每隔一秒执行一次函数

定时器方案

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}

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