节流与防抖

节流与防抖

说明：在前端开发中，防抖（Debouncing）和节流（Throttling）是两种常用的性能优化技术，它们主要用于控制事件处理器（如点击、滚动、键盘事件等）的触发频率，以减少不必要的计算或DOM操作，从而提升页面性能。

1. 节流（Throttling）

节流技术的基本思想是：在指定的时间间隔内，无论事件被触发多少次，都只有第一次或最后一次（取决于具体实现）能触发执行操作。这种技术适用于那些需要限制执行频率的场景，如滚动事件监听、窗口大小调整等。

实现节流可以通过多种方式，最常见的是使用setTimeout或requestAnimationFrame（对于动画效果）。基本思路是设置一个定时器，在定时器执行时执行相应的操作，并在这个操作执行完毕后重新设置定时器。如果在定时器执行期间事件再次被触发，则不会立即执行操作，而是等待定时器完成后再执行。

代码：

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// 使用示例
const throttledFunction = throttle(function() {
  console.log('Function executed!');
}, 250);

window.addEventListener('scroll', throttledFunction);

2. 防抖（Debouncing）

防抖技术的基本思想是：如果在指定的时间间隔内，事件被连续触发多次，那么只有最后一次触发的事件会被处理，前面的事件都会被忽略。这种技术非常适合于处理那些需要等待用户停止操作后才执行的场景，如搜索框输入时的自动补全、窗口大小调整后的计算等。

实现防抖通常使用setTimeout函数，在事件触发时设置一个延迟执行的定时器，如果在这个延迟时间内事件再次被触发，则取消之前的定时器并重新设置。这样，无论事件被触发了多少次，只有最后一次触发会执行相应的操作。

代码：

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

// 使用示例
const debouncedFunction = debounce(function() {
  console.log('Function executed!');
}, 250);

window.addEventListener('resize', debouncedFunction);