dlsjs 文档站

Chinese

English

Chinese

English

夜间模式

throttleAsync / debounceAsync ​

throttleAsync 与 debounceAsync方法用于对函数进行节流和防抖控制，避免高频调用造成的请求堆积或重复执行。

语法 ​

javascript
throttleAsync(func, timeout)
debounceAsync(func, wait)

参数 ​

  • func Function|AsyncFunction

  需要被节流或防抖的目标函数。throttleAsync 接收 async 函数时返回值会被 await。

  • timeout number

  （throttleAsync）节流间隔时间，单位 ms，默认 100。在该时间内重复调用将被忽略。

  • wait number

  （debounceAsync）防抖等待时间，单位 ms，默认 100。在该时间内再次触发将重置计时器。

返回值 ​

Function

  返回一个新的函数，调用该新函数会按节流/防抖规则执行原 func。

  • throttleAsync 返回的是 async function，可以使用 await 获取 func 的返回值。
  • debounceAsync 返回的是普通函数，最终执行通过 setTimeout 触发，无返回值。

描述 ​

  • throttleAsync：实际为节流函数。函数被调用后会立即执行一次原 func，并在 timeout 时间内再次调用则忽略，直到 timeout 时间过去后才可继续调用。适合"先执行后忽略"场景，比如按钮防连击。
  • debounceAsync：经典防抖函数。每次调用都会重置计时器，只有当 wait 时间内不再有新调用时，才真正执行 func。适合"取最后"场景，比如输入框搜索联想。

注意事项 ​

  • 依赖运行环境的定时器 API（setTimeout / clearTimeout），在 web 与 node 之外的 JS 环境可能无法工作。
  • throttleAsync 内部以 Date.now() 作为时间判断，无需 clearTimeout。
  • debounceAsync 内部使用 clearTimeout 重置定时器，最后一次触发后仍需等待 wait 毫秒才会执行。
  • debounceAsync 返回的函数不返回 Promise，无法直接 await 获取结果。
  • 两个函数均通过闭包保存状态，每个被包装函数独立维护自己的时间/定时器，互不影响。

示例 ​

throttleAsync 节流 ​

debounceAsync 防抖 ​

浏览器兼容 ​

依赖定时器API

throttleAsync 使用 Date.now()，debounceAsync 使用 setTimeout 与 clearTimeout。 定时器并非 ES 本身规范，依赖运行环境。 在 web 与 node 之外的 JS 环境可能无法工作。

性能考虑 ​

  • 时间复杂度 O(1)，每次调用仅做时间判断或定时器重置。
  • 内存占用极低，仅持有闭包内少量状态变量。
  • debounceAsync 在频繁触发场景下会反复 clearTimeout，开销可忽略。

相关函数 ​