简单计数器 - 数据集无法正常工作答案

【问题标题】：Simple counters - dataset not working properly简单计数器 - 数据集无法正常工作
【发布时间】：2021-09-21 08:10:07
【问题描述】：

我在一个有很多计数器的网站上工作，但我无法让 [data-speed] 根据计数器中的数字创建不同的计数器速度。

当我运行这个 forEach 循环时，我总是得到相同的速度，该函数从所有计数器中获取最大的数字。

知道我哪里出错了吗？

const counters = document.querySelectorAll('.counter');
let i = 0;

const io = new IntersectionObserver(entries => {

  entries.forEach(entry => {
    const finalNumber = entry.target.innerText; 
    const speed = +entry.target.dataset.speed; 

    if (entry.isIntersecting) {
      entry.target.innerText = i;

      const interval = setInterval(() => {
        entry.target.innerText = i += speed;

        if (i >= finalNumber) {
          entry.target.innerText = finalNumber;
          clearInterval(interval);
        }
      }, 10)
    }
  })
})

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

<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>

【问题讨论】：

标签： javascript intersection-observer

【解决方案1】：

我不知道如何帮助您编写代码，但我编写了另一种可能有用的方法来实现这一点。

const counters = document.querySelectorAll('.counter'), speeds = [];
var x = [], y = 0;

for(counter of counters){
  x.push(y);
  speeds.push(parseInt(counters[y].getAttribute('data-speed')));
  y++;
}

for(var i = 0; i < counters.length; i++){
  (function(i) {
    var interval = setInterval(() => { 
        x[i] = x[i] + speeds[i];
        counters[i].innerHTML = x[i];
        if(x[i] === 1000){clearInterval(interval)}
        if(x[i] > 990){speeds[i] = 1}
      }, 1)
  })(i);
}

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

【讨论】：