防抖 vs 节流

防抖

1. 限制执行次数，多次密集的触发只执行一次。
2. 防止抖动，停止后再执行下一步。
3. 关注结果。

节流

1. 限制执行频率，有节奏的执行。
2. 按时间节奏来。
3. 关注过程。

防抖代码实现

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

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

节流代码实现

//方法一：设置一个标志
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. 搜索框输入，只需用户最后一次输入完，再发送请求。
  2. 窗口大小resize，只需窗口调整完成后，计算窗口大小，防止重复渲染。
• 节流
  
  1. 搜索框，搜索联想功能。
  2. 滚动加载，加载更多或滚动到底部监听。

重点概括

工作中用到这两种性能优化的地方很多，实现原理是理解闭包的使用，但请注意慎重使用闭包，也可直接使用lodash，不必重复造轮子。