具有单独增量的 Javascript 计数器

Question

我试图用单独的增量制作单独的计数器，但它不起作用。我现在拥有的代码可以工作，但 3 个计数器的增量相同。我的问题是如何编码，以便每个计数器都有自己的增量（并保持干燥）。

const counter = function() {
  const counters = document.querySelectorAll(".counter");
  counters.forEach((counter) => {
    function updateCounter() {
      const target = +counter.getAttribute("data-target");
      const c = +counter.innerText;
      const increment = target / 500;

      if (c < target) {
        counter.innerText = `${Math.ceil(c + increment)}`;
        setTimeout(updateCounter, 1);
      } else {
        counter.innerText = target;
      }
    }
    updateCounter();
  });
}

counter();

<div class="counter" data-target="6"></div>
<div class="counter" data-target="6000"></div>
<div class="counter" data-target="12000"></div>

希望你们能帮帮我。 :)

提前致谢！

Answer 1

const makeCounter = (target, increment, start = 0, interval = 1) => {
  const div = document.createElement('div');
  let count = start;
  document.querySelector('body').appendChild(div);
  const handler = setInterval(() => {
    count += increment;
    if (count >= target) window.clearInterval(handler);
    div.innerText = count;
  },interval)
}

makeCounter(6, 1)
makeCounter(6000, 5)
makeCounter(12000, 15)

Answer 2

当您记录increment 的值时，您可以看到三个计数器的时间间隔实际上是不同的。然而，第二个计数器的目标值是第三个计数器的两倍，这意味着第三个计数器的迭代次数将增加一倍，而且每次迭代增加的量也增加一倍，因此它们最终会同时达到目标时间。为第二个计数器取一个较小的值，例如600，你就能看出区别了。

出于性能原因，如果不需要每次都重新计算，我会将尽可能多的操作移出updateCounter() 函数，并切换到requestAnimationFrame() 而不是setTimeout()。

const counter = function() {
  const counters = document.querySelectorAll(".counter");
  counters.forEach((counter) => {
    const target = +counter.getAttribute("data-target");
    const increment = target / 500;
    console.log(increment);

    function updateCounter() {
      const c = +counter.innerText;
      
      if (c < target) {
        counter.innerText = `${Math.ceil(c + increment)}`;
        window.requestAnimationFrame(updateCounter);
      } else {
        counter.innerText = target;
      }
    }
    updateCounter();
  });
}

counter();

<div class="counter" data-target="6"></div>
<div class="counter" data-target="600"></div>
<div class="counter" data-target="12000"></div>