promise本身不提供防抖能力，但可通过闭包保存取消标识和pending promise，用软取消策略（iscanceled标志）确保仅最后一次调用的异步任务执行并返回结果。
Promise 本身不直接提供防抖能力，但可以将传统防抖逻辑与 Promise 结合，实现「最后一次调用才真正执行异步操作，并返回其结果」的效果。关键在于：取消或忽略前序未完成的 Promise，只让最后一次触发的异步任务 resolve 结果。
核心思路：用闭包保存上一次的取消标识和 pending Promise
由于 JavaScript 原生 Promise 不可取消，我们采用「软取消」策略：通过一个标志位（如 isCanceled）标记某次调用是否已被后续调用覆盖；同时每次调用都返回一个新的 Promise，内部只在未被取消时才 resolve 实际异步结果。
基础实现（支持普通函数 + 异步函数）
下面是一个通用、可复用的 debounceAsync 工具函数：
function debounceAsync(fn, delay) {
let timeoutId = null;
let currentResolve = null;
let currentReject = null;
return function(...args) {
// 清除上一次定时器（取消待执行）
if (timeoutId !== null) {
clearTimeout(timeoutId);
// 主动 reject 上一个 pending 的 Promise（可选，便于捕获“被取消”状态）
if (currentReject) {
currentReject(new Error('Debounced call canceled'));
}
}
// 创建新的 Promise
return new Promise((resolve, reject) => {
currentResolve = resolve;
currentReject = reject;
timeoutId = setTimeout(async () => {
try {
// 确保此时未被新调用覆盖
if (currentResolve === resolve) {
const result = await fn(...args);
resolve(result);
}
} catch (err) {
if (currentReject === reject) {
reject(err);
}
} finally {
// 清理引用，避免内存泄漏
currentResolve = null;
currentReject = null;
}
}, delay);
});
};
}
使用示例：封装一个模拟 API 请求的防抖函数
比如用户在搜索框输入时，只在停止输入 300ms 后请求后端：
const fetchSearch = async (query) => {
const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
return res.json();
};
const debouncedSearch = debounceAsync(fetchSearch, 300);
// 绑定到输入事件
input.addEventListener('input', async (e) => {
try {
const data = await debouncedSearch(e.target.value);
renderResults(data);
} catch (err) {
if (err.message !== 'Debounced call canceled') {
console.error('Search failed:', err);
}
}
});
注意事项与优化点
-
不依赖外部取消信号：该实现不依赖 AbortController，兼容性更好；但若需更精确控制（如中止 fetch），可结合
AbortSignal扩展 -
错误处理要区分原因：被取消的 Promise 抛出特定错误（如上面的
'Debounced call canceled'），业务层可选择静默忽略 -
避免闭包堆积：每次调用都会重置
currentResolve和currentReject，并清空定时器，防止旧 Promise 永远 pending -
不适用于同步函数：本实现专为
async或返回 Promise 的函数设计；若传入同步函数，可加一层Promise.resolve(fn(...args))
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
