德本

dboun 函数是一个实用程序，旨在限制函数执行的速率。它确保仅在自上次调用以来经过指定的延迟（delay）后才调用所提供的函数（fn）。默认情况下，延迟设置为 400 毫秒。

这对于处理频繁触发的事件特别有用，例如调整大小、滚动或键入，通过防止过度调用所提供的函数。

使用示例

场景：使用去抖动搜索输入

// Define the function to handle search
function handleSearch(query: string): void {
    console.log("Searching for:", query);
}

// Create a debounced version of the search handler
const debouncedSearch = dboun(handleSearch, 300);

// Simulate typing in a search box
const input = document.querySelector('#searchBox');
input?.addEventListener('input', (event: Event) => {
    const target = event.target as HTMLInputElement;
    debouncedSearch(target.value);
});

在此示例中：

• handleSearch 是处理搜索逻辑的函数。
• debouncedSearch 确保仅在输入不活动 300 毫秒后才执行 handleSearch。

参数

1. fn（函数）：去抖延迟后要执行的函数。

   • 这是在指定延迟后将调用的回调函数。

2. delay（数字，可选）：调用 fn 之前等待的毫秒数。默认为 400 毫秒。

   • 这决定了去抖间隔。

退货

dboun 函数返回 fn 的新去抖版本。返回的函数会延迟 fn 的调用，直到自上次调用返回的函数以来经过延迟毫秒后。

它是如何运作的

• 调用返回的函数时，它会清除为该函数设置的任何现有计时器 (clearTimeout(timeout))。
• 然后设置一个新的计时器 (setTimeout) 以在指定的延迟后调用 fn。
• 如果在延迟期结束之前再次调用返回的函数，则之前的计时器将被清除并重置。

实际应用

1. 输入处理：当用户在输入字段中键入内容时，去抖动可防止事件处理程序的过度执行。
2. 调整大小事件：通过消除窗口调整大小事件处理程序来管理性能。
3. 滚动事件：通过控制滚动事件处理程序的执行频率来避免性能瓶颈。

笔记

• 如果您需要立即执行然后延迟（类似节流阀的行为），则此函数不提供开箱即用的功能。
• 始终确保延迟适合用例，以平衡响应能力和性能。

浏览器兼容性

dboun 函数使用现代 JavaScript/TypeScript 功能，使其与大多数现代环境兼容。对于较旧的环境，请考虑转译代码。

测试

// Test debounced function
const log = dboun((message: string) => console.log(message), 500);
log("Hello"); // Will not log immediately
log("Hello again"); // Resets the timer; only this message will log after 500ms

以上是德本的详细内容。更多信息请关注PHP中文网其他相关文章！