JavaScript事件机制本身不直接提供防抖与节流功能，而是通过在事件监听器中包裹自定义控制逻辑来实现优化，本质是利用事件回调的可编程性，结合定时器或时间戳主动干预函数执行节奏。
JavaScript 中事件机制本身不直接提供防抖与节流功能，而是通过在事件监听器中包裹自定义控制逻辑来实现优化。本质是利用事件回调的可编程性，结合定时器（setTimeout/clearTimeout）或时间戳（Date.now()）等机制，主动干预函数执行节奏。
以下从实现逻辑、关键要素和典型写法三方面说明：
防抖依赖事件触发的“重置计时”逻辑
防抖适用于需要“等待操作稳定后才响应”的场景，比如输入搜索、窗口 resize。
核心做法：
- 每次事件触发时，清除上一个待执行的定时器
- 重新设置一个新定时器，延迟执行目标函数
- 若延迟期内再次触发，就不断重置，直到静默期结束
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
// 使用示例
input.addEventListener('input', debounce(search, 300));节流依赖“固定周期内最多执行一次”的约束
节流适用于需持续反馈但不能过载的场景，比如滚动加载、鼠标移动追踪。
核心做法：
- 记录上一次执行的时间戳
- 每次触发时比对当前时间与上次执行时间差
- 达到间隔才允许执行，并更新时间戳
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
// 使用示例
window.addEventListener('scroll', throttle(loadMore, 100));实现防抖与节流离不开三个底层支撑
-
事件监听机制：
addEventListener提供可绑定、可解绑的回调入口 -
异步调度能力：
setTimeout控制延迟执行，Date.now()提供精确时间判断依据 -
闭包作用域：保存
timer或lastTime等状态，使多次触发共享同一上下文
这两种优化不是替代事件机制，而是在事件回调内部加一层执行策略层，既不改变事件触发行为，又有效降低实际处理频次。
