JavaScript 中节流函数怎么在页面滚动懒加载中使用-js教程-PHP中文网

节流函数在滚动懒加载中核心作用是控制检测频率，避免scroll事件高频触发导致卡顿；它通过限制“判断是否进入视口”执行间隔（如150ms），平衡及时性与性能，手写throttle可实现首次立即执行，现代项目应优先使用intersectionobserver。

javascript 中节流函数怎么在页面滚动懒加载中使用

节流函数在页面滚动懒加载中，核心作用是控制图片或内容的检测频率，避免 scroll 事件高频触发导致的性能问题。它不阻止加载逻辑，而是让“判断是否进入视口”这个动作更节制、更高效。

为什么滚动中必须用节流？

用户快速滚动时，scroll 事件每秒可能触发几十甚至上百次。如果每次都在回调里遍历所有待加载的 DOM 元素并调用 getBoundingClientRect()，会造成明显的卡顿，尤其在低端设备或元素较多时。节流能将检测压缩到合理间隔（如 100–200ms 一次），既保证及时性，又大幅降低计算压力。

一个轻量可用的节流函数写法

不需要依赖 Lodash，手写一个带“首次立即执行”能力的节流函数更可控：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func(...args);
      lastCall = now;
    }
  };
}

使用示例：

const handleScroll = () => {
  document.querySelectorAll('.lazy-img').forEach(img => {
    if (img.isIntersecting === undefined || img.isIntersecting) {
      const rect = img.getBoundingClientRect();
      if (rect.top  0) {
        img.src = img.dataset.src;
        img.isIntersecting = false; // 防重复加载
      }
    }
  });
};
<p>// 滚动时只允许每 150ms 执行一次检测
window.addEventListener('scroll', throttle(handleScroll, 150));</p>

更推荐：搭配 IntersectionObserver（现代方案）

节流是兼容老浏览器的兜底手段；新项目应优先用 IntersectionObserver，它由浏览器原生优化，自动节流且支持精准阈值控制：

const lazyObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      lazyObserver.unobserve(img); // 加载后停止监听
    }
  });
}, { threshold: 0.1 }); // 元素 10% 进入视口即触发
<p>document.querySelectorAll('.lazy-img').forEach(img => {
lazyObserver.observe(img);
});</p>

注意：即使用了 IntersectionObserver，在手动 fallback 到 scroll + getBoundingClientRect 的场景下（比如需要兼容 IE），仍需套用节流函数。