前言

最近找暑假实习经常问到抖动节流的知识，嗯嗯嗯。。怎么说呢就是有这个概念但是又不是很清晰，表达不太出来，特此总结一下。

函数防抖(debounce)

概念

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

举例

举个例子：模拟一段ajax请求，无防抖的情况

function ajax(content){
  console.log('ajax request: ' + content );
}

let inputa = document.querySelector('#unDebounce')

inputa.addEventListener('keyup',function(e){
  ajax(e.target.value);
})

可以看到，我们只要按下键盘，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。下面我们进行优化： 添加防抖的情况

 function debounce(fun,delay){
    let timer = null
    return function(args){ 
      clearTimeout(timer)
      timer = setTimeout(()=>{
        fun(args)
      },delay)
    }
}
  let inputb = document.querySelector('#debounce')
  let debounceAjax = debounce(ajax,1000)
  
  inputb.addEventListener('keyup',function(e){
    debounceAjax(e.target.value);
  })

适用场景

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

函数节流(throttle)

概念

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

举例

function throttle(fun,delay){
      //flag为是否触发函数的标志
      let flag = true;
      return function(args){
        if(flag){
          flag = false; 
          //指定延迟时间到达才可以将flag设为true,指定时间内触发的均不做操作
          setTimeout(function(){ 
            flag = true 
          },delay);

          return fun(args)
        }
      }
    }
    let inputc = document.querySelector('#throttle')
    let throttleAjax = throttle(ajax,2000)
    inputc.addEventListener('keyup',function(e){
      throttleAjax(e.target.value);}
    )

适用场景

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

总结

节流和防抖的作用都是防止函数多次调用。