先说区别

防抖在高频事件过程中只会执行一次，且执行的是最后一次，而节流在高频事件中可能会执行多次，并且至少执行一次，说白了就是间隔一段时间执行一次

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce(fun,time){
  let timer = null;   //  每次先重置timer，否则每次点击都会新增一个新的setTimeout，且不能达到我们多次点击只执行一次的效果。
  return function(){
    clearTimeout(timer)
    let args = arguments
    timer=setTimeout(()=>{
      fun.apply(this,args) //  修改this指向，需要考虑到执行函数的参数，对于参数而言，使用arguments处理不同的参数。
    },time)
  }
}

节流

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

function throttle(fun,time){
 var _lastTime = null;
  return function(){
   var _nowTime = +new Date();//当前时间
    if (_nowTime - _lastTime > time || !_lastTime) {
      fn.apply(this, arguments); //将this和参数传给原函数
      _lastTime = _nowTime;
    }
  }
}

结合应用场景

• debounce
  search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

• throttle
  鼠标不断点击触发，mousedown(单位时间内只触发一次)
  监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断