节流确保函数在一定时间内只执行一次，适用于持续触发需定期响应的场景，如滚动、拖拽；2. 防抖则在事件停止触发后延迟执行，适用于需等待操作结束才响应的场景，如搜索输入、自动保存；两者都依赖事件循环机制通过settimeout和cleartimeout精细调度任务队列中的宏任务来实现，是前端性能优化的核心手段之一。
利用事件循环机制，节流（throttle）和防抖（debounce）的核心在于巧妙地控制函数在任务队列中的调度与执行时机。节流确保函数在一定时间内只执行一次，而防抖则是在事件停止触发一段时间后才执行函数。两者都通过管理定时器（
setTimeout
clearTimeout
节流（Throttling）实现思路： 节流的核心是设置一个冷却期。当函数被调用时，如果当前处于冷却期，则忽略这次调用；如果不在冷却期，则立即执行函数，并进入冷却期。冷却期结束后，允许下一次执行。
function throttle(func, delay) {
let timeoutId = null;
let lastArgs = null;
let lastThis = null;
let lastExecTime = 0;
return function(...args) {
const now = Date.now();
lastArgs = args;
lastThis = this;
if (now - lastExecTime > delay) {
// 如果距离上次执行已经超过了延迟时间，立即执行
func.apply(lastThis, lastArgs);
lastExecTime = now;
if (timeoutId) { // 清除可能存在的尾部定时器
clearTimeout(timeoutId);
timeoutId = null;
}
} else if (!timeoutId) {
// 如果在延迟时间内再次触发，且没有尾部定时器，则设置一个尾部定时器
// 确保在冷却期结束后，能执行最后一次触发
timeoutId = setTimeout(() => {
func.apply(lastThis, lastArgs);
lastExecTime = Date.now(); // 更新执行时间
timeoutId = null;
}, delay - (now - lastExecTime)); // 计算剩余等待时间
}
};
}防抖（Debouncing）实现思路： 防抖的核心是“延迟执行”。每次事件触发时，都取消上次的定时器，然后重新设置一个定时器。这样，只有当事件停止触发一段时间后（即没有新的定时器来取消旧的），函数才会被执行。
function debounce(func, delay) {
let timeoutId = null;
return function(...args) {
const context = this;
// 每次函数被调用时，清除上一个定时器
if (timeoutId) {
clearTimeout(timeoutId);
}
// 重新设置一个新的定时器
timeoutId = setTimeout(() => {
func.apply(context, args);
timeoutId = null; // 执行后清空ID，防止内存泄露或误用
}, delay);
};
}我个人觉得，理解事件循环就像理解了JavaScript的心跳，它让我们的代码在看似单线程的世界里，也能跳出优雅的舞步。节流和防抖之所以能生效，完全是拜事件循环机制所赐。JavaScript是单线程的，这意味着同一时间只能做一件事。但我们平时用的浏览器，明明可以同时处理用户输入、网络请求、动画渲染，这怎么可能？答案就在于事件循环。
事件循环的核心在于它不断地检查调用栈（Call Stack）是否为空。如果为空，它就会去任务队列（Task Queue，也叫消息队列或回调队列）里取出下一个任务放到调用栈执行。
setTimeout
setInterval
节流和防抖正是利用了这一点：
setTimeout
setTimeout
没有事件循环对宏任务（如
setTimeout
在实际开发中，节流和防抖的实现并非总是那么一帆风顺，有几个细节和陷阱需要留意。
节流的实现细节与陷阱： 上面给出的
throttle
常见陷阱：
this
this
window
undefined
Function.prototype.apply
call
this
func.apply(lastThis, lastArgs)
...args
lastArgs
setTimeout
timeoutId
delay
防抖的实现细节与陷阱： 防抖的实现相对直接，核心就是
clearTimeout
setTimeout
常见陷阱：
this
apply
call
this
timeoutId
immediate
// 带有立即执行选项的防抖
function debounceImmediate(func, delay, immediate = false) {
let timeoutId = null;
let invoked = false; // 标记是否已立即执行过
return function(...args) {
const context = this;
const callNow = immediate && !invoked;
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
if (!immediate) { // 非立即执行模式，定时器到期后执行
func.apply(context, args);
}
invoked = false; // 重置标记
timeoutId = null;
}, delay);
if (callNow) { // 立即执行模式，且未执行过
func.apply(context, args);
invoked = true;
}
};
}理解这些细节，能帮助我们写出更健壮、更符合预期的节流和防抖函数。
除了
setTimeout
clearTimeout
(rAF)：
这个API是浏览器专门为动画和高频率UI更新设计的。它告诉浏览器你希望执行一个动画，并且让浏览器在下一次重绘之前调用你指定的回调函数。requestAnimationFrame
登录后复制
rAF
rAF
let ticking = false; // 控制是否已安排下一帧
function updateScrollPosition() {
// 执行昂贵的DOM操作或计算
console.log('Scroll position updated!');
ticking = false;
}
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(updateScrollPosition);
ticking = true;
}
});这比手动设置
setTimeout
微任务（Microtasks）： 虽然微任务（如Promise的回调、
queueMicrotask
和 IntersectionObserver
登录后复制登录后复制：
这些是更高级别的Web API，它们在某种程度上“抽象”了对事件循环的直接操作，提供了更高效、更语义化的方式来处理特定类型的性能优化问题。ResizeObserver
登录后复制登录后复制
IntersectionObserver
ResizeObserver
window.resize
这些机制都利用了事件循环的底层能力，但提供了更高级的抽象，让开发者能够以更声明式、更性能友好的方式处理复杂的UI交互和数据加载场景。它们不是直接的节流/防抖替代品，而是特定问题领域的更优解决方案，体现了事件循环在性能优化中的多样化应用。
我常说，节流是“限速”，防抖是“等停”。理解这个核心差异，选择起来就清晰多了。这两种技术的目标都是减少函数执行频率，避免不必要的资源消耗，但它们适用于不同的场景。
选择节流（Throttling）的场景：
当你希望一个事件在持续触发时，函数能够以一个相对固定的频率被执行，而不是每次触发都执行，就应该使用节流。它保证了在一定时间间隔内，函数最多只执行一次。
scroll
mousemove
resize
选择防抖（Debouncing）的场景：
当你希望一个事件在持续触发时，只有当它停止触发一段时间后，函数才被执行，就应该使用防抖。它强调的是“等待用户操作完成”。
input
drag
resize
简单来说，如果你的场景需要“持续响应但不要太频繁”，用节流；如果你的场景需要“只在用户操作完成后响应一次”，用防抖。理解这两者的根本差异，是前端性能优化的一个基本功。
以上就是如何利用事件循环实现节流和防抖？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
685
收藏
