节流比防抖更适合视口检测，因其能按固定间隔持续检测位置变化，避免漏检；时间戳实现轻量节流；增强版支持首尾触发；现代方案推荐使用Intersection Observer API。
视口检测（如 getBoundingClientRect() 判断元素是否进入可视区）在滚动或 resize 时极易高频触发，不加控制会导致反复计算、重排重绘，明显拖慢页面。节流是更合适的选择——它保证检测逻辑以稳定节奏执行，既不丢失关键时机，又避免资源浪费。
为什么节流比防抖更适合视口检测
视口检测需要持续感知位置变化，比如懒加载图片、动画入场、曝光埋点等场景。防抖会把中间所有触发都丢掉，只保留最后一次，可能导致元素已滚入视口却没被检测到；而节流按固定间隔执行，哪怕滚动很快，也能每 100ms 或 16ms（≈60fps）检查一次，兼顾及时性与性能。
用时间戳方式实现轻量节流
这是最简洁、无定时器副作用的写法，适合视口检测这类轻量计算：
- 记录上一次执行的时间戳
- 每次触发时，对比当前时间与上次执行时间差
- 超过设定阈值（如 100ms）才执行检测逻辑，并更新时间戳
示例代码：
立即学习“前端免费学习笔记（深入）”；
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
function throttleCheckVisible(fn, delay = 100) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
<p>const checkVisible = () => {
const el = document.querySelector('.lazy-item');
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
console.log('元素进入视口');
// 触发加载/动画等
}
};</p><p>window.addEventListener('scroll', throttleCheckVisible(checkVisible));
带首尾控制的增强版节流（推荐生产环境）
真实项目中常需“首次滚动立刻检测”+“滚动停止后补一次”，这时可用支持 leading 和 trailing 选项的节流函数：
- leading: true → 滚动一开始就能立刻判断，不错过首屏元素
- trailing: true → 滚动结束前再兜底一次，防止刚好卡在阈值边缘漏检
- 内部用
setTimeout管理延迟，避免时间戳方式在极端快速滚动下略显滞后
调用示例：
const throttledCheck = throttle(checkVisible, 100, {
leading: true,
trailing: true
});
window.addEventListener('scroll', throttledCheck);
配合 Intersection Observer 更省心（现代方案）
如果目标浏览器支持（Chrome 51+/Firefox 55+/Safari 12.1+），优先用 Intersection Observer API 替代手动节流：
- 原生异步监听，不阻塞主线程
- 自动做内部节流，无需手写逻辑
- 支持配置
threshold（如[0, 0.25, 0.5, 0.75, 1]）精准控制触发时机
简单示例：
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('进入视口');
// 加载图片、启动动画...
io.unobserve(entry.target); // 用完即弃，避免重复触发
}
});
}, { threshold: 0.1 });
<p>document.querySelectorAll('.lazy-item').forEach(el => io.observe(el));
