掌握防抖和节流，性能优化不再是难题**

前端

2024-02-21 14:28:44

引子

在前端开发中，性能优化一直是重中之重。而防抖和节流则是两项不可或缺的技术，它们可以有效地减少不必要的函数调用，提升用户体验。本文将深入浅出地讲解防抖和节流的原理、应用场景、代码实现和注意事项，带你全面掌握这两项性能优化利器。

原理详解

防抖

防抖的原理是：在指定的时间间隔内，如果事件被触发多次，那么只执行一次函数。也就是说，它会抑制函数的执行，直到指定的时间间隔结束后才真正执行。

节流

节流的原理是：在指定的时间间隔内，只执行一次函数。也就是说，它会限制函数的执行频率，即使事件被触发多次，也只会在指定的时间间隔结束后才执行一次。

应用场景

防抖

输入框内容改变后进行搜索建议
窗口大小改变后进行布局调整
鼠标移动后进行元素拖拽

节流

滚动条滚动时进行页面加载
鼠标移动时进行元素跟随
键盘输入时进行表单验证

代码实现

防抖

function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
}

节流

function throttle(func, wait) {
  let lastCall = 0;
  return function() {
    const now = Date.now();
    if (now - lastCall >= wait) {
      func.apply(this, arguments);
      lastCall = now;
    }
  };
}