函数的防抖与节流

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

• 概念

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

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

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

• 应用场景

函数防抖一般用于

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

函数节流一般用于

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

• 具体实现

//防抖函数
function debounce(fn,wait) {
   let timer = null
  return function () {
     let arg = arguments;
     let _this = this;
     if (timer) {
          clearTimeout(timer);
          timer = null;
      }
     let timer = setTimeout(()=>{
        fn.apply(_this,arg);
     },wait) 
  }
}

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

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

要点注意

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

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

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