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

首先:
防抖是控制次数,指触发事件后,在 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)
      })
    }
  }
}

你可能感兴趣的:(史上最简单的防抖节流代码实现)