JS计数器[data-speed]属性无法实现差异化计数速度问题求助

• 计数变量i为全局作用域变量，所有计数器的定时器共享修改同一个i，导致所有计数器数值同步，终止判断逻辑紊乱
• finalNumber未做类型转换，读取的是字符串类型的innerText，数值比较存在隐式转换隐患
• 未限制回调重复触发，元素多次进出视口会重复创建定时器，导致计数逻辑异常

修改后的JS代码 #

const counters = document.querySelectorAll('.counter');

const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const finalNumber = Number(entry.target.innerText);
    const speed = Number(entry.target.dataset.speed);

    if (entry.isIntersecting) {
      // 每个计数器独立维护计数变量
      let count = 0;
      entry.target.innerText = count;

      const interval = setInterval(() => {
        count += speed;
        if (count >= finalNumber) {
          entry.target.innerText = finalNumber;
          clearInterval(interval);
          // 计数完成后取消监听，避免重复触发
          io.unobserve(entry.target);
        } else {
          entry.target.innerText = count;
        }
      }, 10);
    }
  });
});

counters.forEach(item => io.observe(item));

HTML代码无需调整，和原有逻辑保持一致即可 #

<h1 class="counter" data-speed="1">1000</h1>
<h1 class="counter" data-speed="2">1000</h1>
<h1 class="counter" data-speed="3">1000</h1>
<h1 class="counter" data-speed="4">1000</h1>
<h1 class="counter" data-speed="5">1000</h1>

内容的提问来源于stack exchange，提问作者AntunCrnja