高频事件需控制执行节奏而非阻止执行，常用防抖（保最终状态）、节流（保固定频率）、requestIdleCallback（空闲执行）和微任务（同步后立即执行）四种策略。
高频事件（如 resize、scroll、input、鼠标移动等）会短时间内触发大量回调，若每个都直接进任务队列，容易造成异步堆积、UI 卡顿甚至内存压力。核心思路不是“阻止执行”，而是“控制执行节奏”——通过节流（throttle）、防抖（debounce）、requestIdleCallback 或微任务调度等方式，让事件处理与浏览器渲染节奏对齐。
用防抖（debounce）延迟合并相似操作
适合“只关心最终状态”的场景，比如搜索框输入联想、窗口尺寸最终值获取。原理是每次触发重置定时器，仅保留最后一次调用。
- 使用
setTimeout+ 闭包维护 timer 引用 - 注意清除上一个定时器，避免内存泄漏或误执行
- 可选支持立即执行（leading edge）和尾部执行（trailing edge）
示例：
function debounce(fn, delay, immediate = false) {
let timer = null;
return function(...args) {
const callNow = immediate && !timer;
clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
if (!immediate) fn.apply(this, args);
}, delay);
if (callNow) fn.apply(this, args);
};
}
<p>// 使用
window.addEventListener('resize', debounce(() => {
console.log('resize 完成后执行');
}, 150));
用节流（throttle）限制单位时间最大执行次数
适合“需要持续响应但不必每次都执行”的场景，比如滚动监听更新吸顶状态、拖拽中实时计算位置。目标是固定频率（如每 100ms 最多一次）。
立即学习“Java免费学习笔记（深入）”；
- 可用时间戳比对（简单可靠）或定时器开关（更精准控制间隔）
- 注意 this 和参数的正确传递
- 避免在节流函数内做高开销操作，否则仍可能阻塞主线程
时间戳版示例：
function throttle(fn, limit) {
let lastCall = 0;
return function(...args) {
const now = Date.now();
if (now - lastCall >= limit) {
fn.apply(this, args);
lastCall = now;
}
};
}
<p>window.addEventListener('scroll', throttle(() => {
document.body.style.backgroundColor = <code>hsl(${Date.now() % 360}, 50%, 70%)</code>;
}, 100));
利用 requestIdleCallback 做低优先级后台处理
当事件逻辑较重（如批量 DOM 更新、复杂计算），又不需立刻反馈时，可交给浏览器空闲时段执行，避免抢占渲染或用户交互资源。
- 兼容性需考虑（IE 不支持，可用 setTimeout 降级）
- 配合
timeRemaining()判断是否还有空余时间，防止单次执行过久 - 适合非即时性任务：日志上报、预加载、非关键 UI 同步等
示例：
function scheduleLowPriorityTask(task) {
if ('requestIdleCallback' in window) {
requestIdleCallback(deadline => {
while (deadline.timeRemaining() > 0 && !deadline.didTimeout) {
task();
}
// 若超时，安排下一轮继续
if (!deadline.didTimeout) {
scheduleLowPriorityTask(task);
}
}, { timeout: 2000 });
} else {
setTimeout(task, 0); // 降级
}
}
用 Promise.then / queueMicrotask 控制微任务时机
当需要“确保在当前同步代码结束后、下次宏任务前执行”，且逻辑轻量（如更新状态、触发通知），微任务是更细粒度的选择。它不会像 setTimeout(0) 那样插入宏任务队列造成额外延迟。
-
queueMicrotask()是最直接方式（现代浏览器支持） -
Promise.resolve().then()是广泛兼容的替代方案 - 慎用于高频循环中——大量微任务仍可能引发队列膨胀
例如，在 input 事件中批量收集变化再统一处理：
let pending = false;
const changes = [];
<p>function handleInput() {
changes.push(event.target.value);
if (!pending) {
pending = true;
queueMicrotask(() => {
processBatch(changes);
changes.length = 0;
pending = false;
});
}
}
不复杂但容易忽略：高频事件本身无法被“取消”，关键是把后续逻辑从事件处理器中解耦出来，交给更可控的调度机制。选型看场景——防抖保终态、节流保节奏、空闲回调保流畅、微任务保顺序。实际项目中常组合使用，比如节流 + 微任务封装，或防抖 + requestIdleCallback 降级。
