JavaScript 中的去抖动与限制：优化函数调用以获得更好的性能

了解 JavaScript 中的去抖和节流

去抖动和限制是 JavaScript 中用于控制函数执行速率的两种重要技术。这些技术通常用于优化性能，特别是在处理用户输入、滚动事件和调整事件大小等场景中。两者都是用来限制函数调用的频率，但作用方式不同。

1. 去抖

去抖动 确保仅在自上次事件以来经过一定时间后调用函数。换句话说，它会延迟函数的执行，直到用户完成执行操作，例如在文本字段中键入或调整窗口大小。这对于您想要防止函数被过于频繁调用的场景特别有用，例如当用户在搜索栏中键入时。

去抖动的工作原理：

• 当事件被触发时，函数调用会延迟指定的时间。
• 如果在延迟时间过去之前再次触发事件，则取消先前的函数调用，并重置延迟计时器。
• 该函数仅在延迟时间过去且没有任何进一步事件的情况下执行。

去抖动示例：

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

在此示例中：

• debouncedSearch 只会在 500 毫秒过去而没有再次调用后调用 searchQuery。
• 这可以防止每次键入字符时调用搜索函数。

去抖的用例：

• 搜索输入：实现实时搜索建议时。
• 窗口大小调整：避免在每次调整大小事件时触发布局重新计算。
• 滚动事件：防止在连续滚动期间触发函数，特别是在无限滚动场景中。

2. 节流

限制 确保每个指定的时间间隔最多调用一次函数，无论事件被触发多少次。当您想要限制函数调用的频率时，这非常有用，例如限制用户在特定时间段内滚动或调整窗口大小的次数。

节流的工作原理：

• 该函数在第一次触发事件时立即执行。
• 此后，最多每n毫秒执行一次，即使事件触发更频繁。

节流示例：

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

在此示例中：

• throttledScroll 将确保 logScrollEvent 每秒最多调用一次，无论在此期间触发了多少个滚动事件。
• 函数第一次立即执行，后续调用会延迟以保持间隔。

节流用例：

• 滚动事件：限制滚动期间调用函数的频率（例如，延迟加载图像）。
• 调整大小事件：优化调用窗口大小调整函数的次数。
• 鼠标移动：防止鼠标快速移动期间连续执行。

3. 去抖与节流：主要区别

功能

Feature	Debouncing	Throttling
Function Execution	Executes after a delay when events stop	Executes at a fixed interval, no matter how many events occur
Use Case	Ideal for events that occur frequently but should trigger once after some idle time (e.g., input fields, search bars)	Ideal for events that fire continuously (e.g., scroll, resize) but should be limited to a fixed interval
Example Scenario	Search bar input where suggestions are updated only after the user stops typing for a certain period	Scroll events where a function should only run once every few seconds, even if the user scrolls frequently
Execution Frequency	Executes only once after the event stops firing	Executes periodically, based on the interval set
Effectiveness	Prevents unnecessary executions during rapid event firing	Controls the frequency of function executions, even during continuous events

去抖动 节流 标题> 函数执行 事件停止后延迟执行 无论发生多少事件，都会以固定的时间间隔执行 用例 非常适合频繁发生但应在空闲时间后触发一次的事件（例如输入字段、搜索栏） 非常适合连续触发的事件（例如滚动、调整大小），但应限制在固定间隔内 示例场景 搜索栏输入，仅在用户停止输入一段时间后才会更新建议 滚动事件，即使用户频繁滚动，函数也只能每隔几秒运行一次 执行频率 仅在事件停止触发后执行一次 根据设置的时间间隔定期执行 有效性 防止快速事件触发期间不必要的执行 控制函数执行的频率，即使在连续事件期间 表>

4. 实际示例：同时使用去抖动和节流

在需要同时使用去抖和节流技术来优化应用程序的情况下，您可以将这两种技术结合起来。例如，您可能希望限制滚动事件，同时消除搜索查询的抖动。

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

在此示例中：

• 滚动事件被限制为每秒仅触发一次。
• 搜索输入将被去抖，仅在 500 毫秒不活动后才会触发。

结论

• 去抖动 确保函数在经过一定时间后执行而不触发事件，非常适合搜索输入或调整大小等场景。
• 限制 限制函数在给定时间范围内执行的次数，这对于滚动或窗口大小调整等事件非常有用。

这两种技术都有助于优化性能并防止不必要的执行，特别是在事件快速发生的情况下。

---

嗨，我是 Abhay Singh Kathayat！
我是一名全栈开发人员，拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。
请随时通过我的商务电子邮件与我联系：kaashshorts28@gmail.com。

以上是JavaScript 中的去抖动与限制：优化函数调用以获得更好的性能的详细内容。更多信息请关注PHP中文网其他相关文章！