JavaScript中节流（Throttling）和防抖（Debouncing）的区别

介绍

在JavaScript开发中，处理频繁触发的事件时，节流（Throttling）和防抖（Debouncing）是两种常用的优化技术。它们可以限制函数的执行频率，提升性能和用户体验。本文将详细介绍节流和防抖的概念、应用场景以及代码示例，帮助读者理解两者的区别和使用方法。

一、节流（Throttling）

节流是一种限制函数调用频率的技术。当事件触发时，节流会在一定时间间隔内执行一次函数，而忽略在此时间间隔内的其他触发。它确保函数以一定的速率执行，避免过度频繁的执行。

应用场景

1. 页面滚动事件：限制滚动事件的触发频率，防止滚动过程中频繁触发回调函数；
2. 输入框输入事件：减少实时输入触发的请求次数，提升性能；
3. 窗口调整事件：限制窗口调整事件的触发频率，避免频繁更新UI。

代码示例

function throttle(func, delay) {
  let timerId;
  return function (...args) {
    if (!timerId) {
      timerId = setTimeout(() => {
        func.apply(this, args);
        timerId = null;
      }, delay);
    }
  };
}

// 在滚动事件中使用节流
window.addEventListener('scroll', throttle(function() {
  // 执行滚动事件的回调函数
  console.log('Scroll event throttled');
}, 200));

二、防抖（Debouncing）

防抖是一种限制函数调用频率的技术。当事件触发后，防抖会等待一段时间，如果在此时间内没有再次触发事件，才会执行函数。如果事件在此时间内再次触发，防抖会重新计时，等待新的一段时间。

应用场景

• 搜索框输入事件：减少实时搜索触发的请求次数，提升性能；
• 窗口调整事件：限制窗口调整事件的触发频率，避免频繁更新UI；
• 避免按钮重复点击：限制按钮点击事件的触发频率，防止用户重复点击导致多次操作。

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

// 在搜索框输入事件中使用防抖
const searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', debounce(function() {
  // 执行搜索逻辑
  console.log('Searching...');
}, 300));

三、节流和防抖的区别

• 执行时机：节流在一定时间间隔内执行函数，无视间隔内的其他触发；防抖等待一段时间后执行函数，如果期间有新的触发，则重新计时。
• 函数调用次数：节流会按照设定的时间间隔执行函数，无视触发次数；防抖只会在最后一次触发后执行一次函数。
• 应用场景：节流适用于需要保持一定频率执行的场景，如滚动事件；防抖适用于需要在连续触发后等待一段时间执行的场景，如输入事件。