函数的防抖和节流、区别、如何实现

什么是函数的防抖和节流？

它是优化处理高频率代码执行的一种手段；比如我们监听resize窗口的变化、scroll滚动、mousemove移动、keypress按下等事件的时候，它会频繁的调用我们绑定的事件，很容易浪费前端资源，从而降低性能；

1、节流手段

节流n秒内只运行一次，在n秒内重复触发，只有一次执行；
常用来应用的场景，在间隔一段时间执行一次回调函数，有：
滚动加载、加载更多、滚动到底部监听；
搜索框，搜索联想功能

实现：
时间戳写法，事件会立即执行，停止触发后没有办法再次执行：

function throttled1(fn,delay = 500){
  let oldtime =  Date.now();
  return function(...args){
      let newtime = new Date.now();
      if(newtime - oldtime >= delay){
          fn.apply(null,args);
          oldtime = new Date.now();
      }
  }
}

使用定时器写法，delay毫秒后运行一次，第二次事件停止触发后依然会再一次运行

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

可以将时间戳写法的特性与定时器写法的特性相结合，实现一个更加精确的节流。实现如下:

function throttled(fn,delay){
  let timer = null;
  let startimer = Date.now();
  return function(){
      let _that = this;
      let curttime = Date.now(); //当前时间
      let remaining = delay - (curttime - startimer); //从上一次到现在，还剩下多少时间
      let args = arguments
      clearTimeout(timer);
      if(remaining <=0){
        fn.apply(_that,args)
        startimer = Date.now();
      }else{
        timer = setTimeout(fn,remaining);
      }
      
  }
}

2、防抖
n秒后执行该事件，若在n秒内被重复触发，则重新计时；
常应用的场景，在连续的事件，只需触发一次回调的场景有：
搜索框搜索输入，只需要用户最后一次输入完，再发送请求；
手机号、邮箱验证输入检测
窗口大小resize，只需要窗口调整完成后，计算窗口大小，防止重复渲染；
实现：
简单版实现：

function debounce(func,wait){
    let timer ;
    return function(){
      let _that = this;  //保存this指向
      let args = arguments; // 拿到events对象
      clearTimeout(timer);
      timer = setTimeout(function(){
          func.apply(_that,args)
      },wait)
    }
}

防抖如果需要立即执行，可加入第三个参数用于判断，实现如下：

function debounce(func,wait,imediate){
  let timeout;
  return function(){
    let _that = this;
    let args = arguments;
    
    if(timeout) clearTimout(timeout);
    if(imediate){
      let callNow = !timeout; //第一次会立即执行，以后只有事件执行后才会再次触发
      timeout = setTimeout(function(){
          timeout = null;
      },wait)
      if(callNow){
        func.apply(_that,args)
      }
    }else{
      timer = setTimeout(function(){
          func.apply(_that,args)
      },wait)
    }

  }

}

区别
相同点：
都可以通过setTimeout 实现，目的都是降低回调执行频率，节省计算资源
不同点：
函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次

摘引：【js每日一题】https://mp.weixin.qq.com/s/xGMUjQiZEI7PV8Wlvf_YNA