节流和防抖

 

1. 防抖debounce

防抖：debounce，不会立马执行的，触发后，过一段时间执行，如果在时间到达之前又触发了，那重新等待。

常用于比如我们下拉框关键字输入远程搜索，如果不做防抖，那用户一边输入关键字，搜索的请求会立马发起，在完整输入一串关键字的过程中，可能会触发多次查询，但这是无意义的，浪费资源。

function debounce(fn,wait){
  let timer;
  return function(){

      // 每次触发都清空之前的，然后重新等待执行
      if(timer){
          clearTimeout(timer)
      }
      let _this = this;
      let args = arguments;
      timer = setTimeout(()=>{
          fn.apply(_this,args)
    },wait)    
  }    
}    
// 以拖动窗口为例，一直拖动窗口，不会一直打印resize，只有在你停下来后，等待2s才会打印
window.onresize = debounce(()=>{console.log('resize')},2000)

2. 节流throttle

节流：  throttle，触发后，过一段时间执行，即使在等待过程中，再次触发，会忽略掉。

function throttle(fn,wait){
     let timer;
     return function(...args){
        
         if(timer){
             return
         }
         timer = setTimeout(()=>{
            fn(...args)
            clearTimeout(timer)
         },wait)
     }
 }