JS防抖与节流(性能优化)

声明：不是原创，只是自己记录，关注vue社区公众号吧；

防抖：动作停止后的时间超过设定的时间时执行一次函数。注意：这里的动作停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则函数一直不会执行。

简单实现：

function debance(fn, delay) {
  let timer = null;
  return () => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}

window.addEventListener(
  "scroll",
  debance(() => {
    console.log(111);
  }, 1000)
);

防抖应用场景：
1. search搜索联想，用户在不断输入值时，用防抖来节约请求资源
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流：一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

简单实现：

//方法一：设置一个标志
    function throttle(fn, delay) {
      let flag = true;
      return () => {
        if (!flag) return;
        flag = false;
        timer = setTimeout(() => {
          fn();
          flag = true;
        }, delay);
      };
    }
    //方法二：使用时间戳
  function throttle(fn, delay) {
      let startTime=new Date()
      return () => {
        let endTime=new Date()
        if (endTime-startTime>=delay){
          fn()
          startTime=endTime
        }else{
          return
        }
      };
    }
    window.addEventListener(
      "scroll",
      throttle(() => {
        console.log(111);
      }, 1000)
    );

节流应用场景：
1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
2. 监听滚动事件，比如是否滑到底部自动加载更多（懒加载），用throttle来判断