如何实现滚动到指定位置时JS计数器脚本仅触发一次运行

实现思路 #

使用IntersectionObserverAPI监听计数器元素的可见性，相比监听scroll事件性能更高，触发计数后直接取消对元素的监听，保证逻辑仅执行1次。

修改后的完整JS代码 #

const counters = document.querySelectorAll('.number');
// 初始化计数器状态，设置初始值为0
counters.forEach((number) => {
  number.innerHTML = "0";
});
const updateCounter = (number) => {
  const target = +number.getAttribute("data-target");
  const c = +number.innerText;
  if (c < target) {
    number.innerText = c + 1;
    setTimeout(() => updateCounter(number), 100);
  } else {
    number.innerText = target;
  }
};
// 创建交叉观察器
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 元素进入视口时触发
    if (entry.isIntersecting) {
      updateCounter(entry.target);
      // 触发后取消监听，保证仅执行1次
      observer.unobserve(entry.target);
    }
  })
}, {
  // 元素10%进入视口时触发，可根据需求调整阈值
  threshold: 0.1
})
// 给所有计数器元素绑定观察器
counters.forEach(counter => {
  observer.observe(counter);
})

代码修改说明 #

• 原有直接执行的updateCounter()方法改为仅在元素进入视口时调用
• 通过观察器的unobserve方法，触发一次后就不再监听对应计数器元素，避免重复执行计数逻辑
• 无需修改原有HTML和CSS代码，可直接复用现有结构和样式

内容的提问来源于stack exchange，提问作者Эльшан Намазов