输入类操作用防抖+AbortController，高频触发用节流+按钮禁用或时间戳控制；需每次新建AbortController、绑定this、服务端幂等设计，慎用leading选项。
Ajax 请求配合防抖和节流，核心不是“加个函数就完事”，而是根据用户行为意图选择合适策略：输入类操作用防抖，保证只发最后一次；高频触发类操作（如滚动、按钮连点）用节流，控制单位时间最多发一次。两者都需配合 AbortController 或状态标记，防止请求堆积或覆盖。
输入框搜索：用防抖 + AbortController 取消旧请求
用户边输边搜时，前一个请求可能还没返回，后一个已发出——容易导致结果错乱。防抖确保只在停顿后发请求，AbortController 则主动终止未完成的上一次请求。
- 定义防抖函数，每次调用前先 abort 上次请求
- fetch 传入 signal: abortController.signal，让请求可中断
- catch 中过滤 AbortError，避免误报错误
示例：
let debounceTimer = null;
const abortController = new AbortController();
function debouncedSearch(keyword) {
abortController.abort(); // 取消上一次请求
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
fetch('/api/search?q=' + encodeURIComponent(keyword), {
signal: abortController.signal
})
.then(res => res.json())
.then(data => renderResults(data))
.catch(err => {
if (err.name !== 'AbortError') console.error(err);
});
}, 300);
}
立即学习“Java免费学习笔记（深入）”；
提交按钮点击：用节流 + 按钮禁用更直接有效
防抖不适合按钮场景——用户点一次就希望立刻响应，而不是等停顿。节流虽能限频，但对“快速连点”不够直观；更稳妥的做法是点击即禁用按钮，并在请求完成后恢复。
- 点击瞬间设 button.disabled = true，视觉+交互双重阻断
- 请求成功或失败后，统一恢复 button.disabled = false
- 可叠加 loading 状态提示，提升体验
示例：
const btn = document.getElementById('submit-btn');
btn.addEventListener('click', async () => {
btn.disabled = true;
try {
const res = await fetch('/api/submit', { method: 'POST', body: formData });
handleSuccess(await res.json());
} catch (err) {
handleError(err);
} finally {
btn.disabled = false;
}
});
滚动加载或窗口缩放：节流控制执行节奏
这类事件每秒触发数十次，不加限制会严重拖慢页面。节流不是为防重复请求，而是保性能——比如滚动到底部时，每 500ms 最多检查一次是否该加载。
- 用时间戳判断距上次执行是否超阈值，简单可靠
- 避免用定时器开关逻辑，易出竞态（如 clearTimeout 时机不准）
- 节流函数内只做“条件检查”，真正发请求仍走独立逻辑（可再加防抖或 AbortController）
示例（时间戳版节流）：
function throttle(fn, delay) {
let last = 0;
return function (...args) {
const now = Date.now();
if (now - last > delay) {
fn.apply(this, args);
last = now;
}
};
}
window.addEventListener('scroll', throttle(() => {
if (isAtBottom() && !loading) {
loadMore(); // 这里可再套防抖或 AbortController 控制请求本身
}
}, 500));
关键细节别漏掉
光套函数还不够，几个实战中容易踩的坑要提前防住：
- AbortController 必须每次新建：复用同一个实例会导致后续 abort 失效
- 防抖/节流函数需绑定 this 和参数：用箭头函数或 .apply 保证上下文正确
- 服务端也要有幂等设计：前端拦截不是银弹，关键操作（如支付、提交）后端必须支持重复提交识别
- 慎用 lodash.debounce 的 leading 选项：首次立即执行 + 后续防抖，在输入场景下反而引发首字符就请求
