史上最简单的防抖节流代码实现

首先：
防抖是控制次数，指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。常见例子电梯等人。函数防抖一般用在什么情况之下呢？一般用在，连续的事件只需触发一次回调的场合。具体有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求；
• 用户名、手机号、邮箱输入验证；
• 浏览器窗口大小改变后，只需窗口调整完后，再执行 resize 事件中的代码，防止重复渲染。

立即执行版本

debounce(fn,delay){
  let timer;
  return function(){
    let context=this;
    let args=arguments;
    callNow=!timer
    if(timer){
      clearTimeout(timer)
    }
    timer=setTimeout(()=>{
      fn.apply(context,args)
    })
    if(callNow) fn.apply(context,args)
  }
}

非立即执行版本

debounce(fn,delay){
  let timer;
  return function(){
    let context=this;
    let args=arguments;
    if(timer){
      clearTimeout(timer)
    }
    timer=setTimeout(()=>{
      fn.apply(context,args)
    })
  }

节流是控制频率,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

function throttle(fn,delay){
  let timer;
  return function(){
    let context=this;
    let args=arguments;
    if(!timer){
      timer=setTimeout(()=>{
        timer=null
        fn.apply(context,args)
      })
    }
  }
}