防抖（Debounce）和节流（Throttle）

防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们用于控制函数执行的频率，以减少不必要的计算开销，提高用户体验。这两种技术在处理用户频繁触发的事件（如键盘输入、窗口滚动等）时特别有用。

防抖（Debounce）

防抖的主要目的是确保在一系列连续的触发事件中，只执行最后一次事件触发的动作。这在处理如输入框的输入事件、窗口调整大小等场景时非常有用。

防抖的实现

防抖的基本思想是在事件触发后的一段时间内不执行函数，如果在这段时间内事件再次被触发，则重新计时；只有当这段时间过去后，函数才被执行一次。

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

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

window.addEventListener('resize', debouncedFunction);

节流（Throttle）

节流的主要目的是限制函数执行的最大频率。无论事件触发多少次，在设定的时间间隔内，函数最多只能执行一次。

节流的实现

节流的基本思想是在设定的时间间隔内，函数只能执行一次。如果在这个间隔内函数再次被触发，将会忽略这次触发，直到间隔结束。

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

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

document.getElementById('some-element').addEventListener('scroll', throttledFunction);

防抖和节流的区别

• 防抖：确保在一系列连续的触发事件中，只执行最后一次事件触发的动作。
• 节流：限制函数执行的最大频率，在设定的时间间隔内，函数最多只能执行一次。

应用场景

• 防抖：适用于那些不需要立即响应的事件，如窗口大小变化、输入框输入等。
• 节流：适用于需要定期执行的任务，如滚动事件、鼠标移动事件等。

示例代码

防抖示例

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

const logInput = debounce(function(event) {
  console.log(event.target.value);
}, 300);

document.getElementById('input-field').addEventListener('input', logInput);

节流示例

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

const logScroll = throttle(function(event) {
  console.log('Scrolled');
}, 1000);

document.getElementById('scrollable-area').addEventListener('scroll', logScroll);

总结

防抖和节流都是为了优化用户体验和提高性能而设计的技术。选择使用哪一种取决于具体的使用场景。防抖适合于那些不需要立即响应的事件，而节流则适用于需要定期执行的任务。通过合理运用这两种技术，可以显著提升应用程序的性能和响应速度。