节流是高频事件中固定间隔最多执行一次回调的性能优化手段；滚动埋点需及时捕捉区域到达状态，故用节流而非防抖；手写节流函数通过时间戳控制，无定时器依赖；现代曝光埋点推荐IntersectionObserver，它原生节流、高效精准。
节流（Throttle）是处理高频事件（如 scroll）时避免过度触发、提升性能并保障埋点上报合理性的常用手段。核心思路是：**固定时间间隔内最多执行一次回调，丢弃中间的触发**。
为什么滚动埋点要用节流而不是防抖？
滚动监听埋点通常关注用户「是否到达某个区域」或「在某区域停留一段时间」，比如「曝光埋点」。防抖会延迟到滚动停止才触发，可能错过关键时机；而节流能保证每 N 毫秒至少有一次检查机会，更及时捕捉滚动过程中的有效状态。
手写一个轻量节流函数（带时间戳控制）
以下是一个无依赖、适合埋点场景的节流实现：
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}说明：
立即学习“Java免费学习笔记（深入）”；
- 用
lastTime记录上一次执行时间，每次触发前比对当前时间差 - 不使用定时器（如
setTimeout），避免异步延迟和闭包堆积 - 适用于需要「立即执行首次调用」且严格控频的场景（如滚动中每 200ms 检查一次元素是否进入视口）
结合 IntersectionObserver 做更精准的曝光埋点（推荐）
单纯靠 scroll + 节流判断元素是否可见，计算开销大、精度低、兼容性差。现代方案应优先使用 IntersectionObserver，它原生支持节流式回调，并自动优化性能：
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 元素进入视口，触发曝光埋点
reportExposure({
elementId: entry.target.dataset.id,
visibleRatio: entry.intersectionRatio.toFixed(2)
});
}
});
},
{ threshold: [0, 0.1, 0.5, 1.0] } // 可配置触发比例阈值
);
<p>// 观察所有带 data-id 的曝光元素
document.querySelectorAll('[data-id]').forEach(el => observer.observe(el));优势：
- 浏览器底层优化，不阻塞主线程，比手动监听 scroll + getBoundingClientRect 高效得多
- 天然具备「节流」特性：即使元素快速进出视口，回调也不会高频触发
- 提供
intersectionRatio等精确数据，便于做「有效曝光」判定（如只报 ratio ≥ 0.5 且持续 300ms 的）
节流 + 手动位置判断（兼容老浏览器或特殊逻辑）
若必须用 scroll 事件（如需监听页面整体滚动行为、计算滚动速率等），可这样组合：
const handleScroll = throttle(() => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const viewportHeight = window.innerHeight;
<p>// 示例：上报「滚动深度」埋点（每下拉 20% 触发一次）
const scrollPercent = Math.round((scrollTop / (document.body.scrollHeight - viewportHeight)) <em> 100);
const level = Math.floor(scrollPercent / 20) </em> 20;</p><p>if (level > 0 && !reportedLevels.has(level)) {
reportScrollLevel({ level });
reportedLevels.add(level);
}
}, 300); // 每 300ms 最多上报一次</p><p>window.addEventListener('scroll', handleScroll);注意点：
- 用
Set或对象记录已上报的层级，避免重复上报同一档位 - 节流时间不宜过短（如 500ms），影响数据时效性；200–300ms 是较平衡的选择
- 记得在组件卸载或页面离开前移除监听：
window.removeEventListener('scroll', handleScroll)
