节流函数确保在指定时间间隔内最多执行一次回调，用于优化高频滚动事件；基础实现通过时间戳比对控制执行频率，增强版支持取消清理，现代场景可选用intersectionobserver或requestanimationframe替代。
节流（Throttle）函数的核心是：在指定时间间隔内，最多只执行一次回调。滚动事件（scroll）高频触发时，用它能显著减少处理逻辑的执行次数，避免卡顿或重复计算。
节流函数的基本实现
一个轻量、可复用的节流函数如下：
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
说明：
- lastTime 记录上一次执行的时间戳
- 每次调用时对比当前时间，只有超过 delay 才真正执行
- 使用
...args和apply保证原函数的this和参数正确传递
绑定到滚动事件的实际用法
将节流后的函数传给 addEventListener：
const handleScroll = () => {
console.log('滚动位置：', window.pageYOffset);
// 例如：懒加载、吸顶导航、视差效果等业务逻辑
};
<p>const throttledScroll = throttle(handleScroll, 160); // 约每秒6次（60fps下合理）
window.addEventListener('scroll', throttledScroll);</p>
注意点：
- 推荐延迟设为 100–200ms，兼顾响应性和性能；太短失去节流意义，太长可能影响交互反馈
- 如果需立即执行第一次（即“首次触发不等待”），可用带
leading参数的增强版，但基础场景通常不需要 - 记得在组件卸载或页面离开前调用
removeEventListener，避免内存泄漏（尤其 SPA 中）
更健壮的写法（支持取消与清理）
实际项目中建议封装成可取消的版本：
function throttle(fn, delay) {
let timeoutId = null;
let lastTime = 0;
<p>const throttled = function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
} else if (!timeoutId) {
timeoutId = setTimeout(() => {
fn.apply(this, args);
lastTime = Date.now();
timeoutId = null;
}, delay - (now - lastTime));
}
};</p><p>throttled.cancel = () => {
if (timeoutId) clearTimeout(timeoutId);
timeoutId = null;
};</p><p>return throttled;
}</p>
这样你可以主动清理：
const scrollHandler = throttle(updateHeader, 150);
window.addEventListener('scroll', scrollHandler);
<p>// 后续需要移除时（如 React useEffect cleanup）
return () => {
scrollHandler.cancel();
window.removeEventListener('scroll', scrollHandler);
};</p>
现代替代方案：IntersectionObserver 与 passive 选项
不是所有滚动场景都必须手动节流：
- 判断元素是否进入视口？优先用 IntersectionObserver，它由浏览器原生优化，不绑定 scroll 事件
- 仅需监听滚动方向或位置变化？可搭配
{ passive: true }提升滚动流畅度：window.addEventListener('scroll', handler, { passive: true }); - 复杂动画逻辑？考虑用
requestAnimationFrame替代节流，让更新与屏幕刷新同步
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
