摘要——提起防抖与节流，想必小伙伴们都不陌生，面试官也不陌生。手写防抖与节流，已经见怪不怪了。下面来粗略谈谈我对防抖，节流的看法。

• 概念

函数防抖，一个函数在一段时间后回调执行，如果在该时间内重复执行，则重新计时。

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

主要的区别在于，防抖是回调执行。而节流是立即执行。

• 应用场景

函数防抖一般用于

• 输入框提交ajax请求。
• 按钮提交表单。

函数节流一般用于

• DOM元素拖拽事件的发生。

• 具体实现

//防抖函数
function debounce(fn,wait,...arg) {

    let timer = null
   return function () {
      if (timer) {
           clearTimeout(timer);
           timer = null;
       }
      timer = setTimeout(()=>{
         fn.apply(this,arg);
         //获取参数传染apply中
      },wait) 
   }
 }
 
 let fn = (a,b)=>{
   console.log('触发函数',a,b)
 }
 

 setInterval(debounce(fn,500,'参数1','参数2'),1000)


//节流函数
function throttle(fn,gaptime){
   let lasttime = null;
   return function(){
      let nowtime = new Date().getTime();
      if(nowtime - lasttime>gaptime||!lasttime){
          fn();
          lasttime = nowtime
      }
   }
}
let fn = ()=>{
  console.log('触发函数')
}


setInterval(throttle(fn,1000),500);

//如果要实现最后一次执行之后会触发
const  throttle = function(fn,wait){
   let time= null;
   let lasttime = null
   return function(){
      let nowtime = new Date().getTime();
      clearTimeout(time)
       if(lasttime==null || nowtime-lasttime>wait){
           fn()
           nowtime = lasttime
       }else {
          time = setTimeout(fn,wait-(nowtime-lasttime))
       }
      
   }
}

要点注意

setTimeout(()=>{ fn.apply(_this,arg); },wait)

在setTimeout里面调用的函数，需要更改this指向，不然就是全局的window对象。

并且，这里采用了闭包的特性，在setInterval里面循环调用的时候，相当于调用了同一个实例。可以访问同一个变量timer,或者是lasttime。