如何实现一个在给定时间段内计数的计数器 JS？

Question

我想实现一个在给定持续时间内计数的计数器。如果我想在一秒内数到 100，那么每次计数之间的间隔应该是 10 毫秒，因此当它被数到 100 时，它变成了 1 秒。对于 1000，每次计数之间的间隔应为 1 毫秒。

我试过使用 setInterval 并根据我要计数的数字动态更改计数器的延迟，但是 setInterval 有问题，它没有按预期工作。除了使用 setInterval，我如何在 JavaScript 中实现这个计数器。提前谢谢你。

const btn = document.querySelector('button');
const counter1 = document.querySelector('.counter1');
const counter2 = document.querySelector('.counter2');

btn.addEventListener('click', ()=> {
    increment(100, counter1);
  increment(1000, counter2);
})

const increment = (n, counter) => {
  let m = 0;
  let time = 1000 / n;
  setInterval(() => {
    if (m < n) {
      m += 1;
      counter.textContent = m;
    } else clearInterval(this);
  }, time);
  
};

.counter-container {
 display: flex;
}

.counter {
  margin: 10px;
  text-align: center;
}
button {
  margin-left: 80px;
};

<div class="counter-container">
<div class="counter">
  <h3>Counter1</h3>
  <p class="counter1">100</p>
</div>
<div class="counter">
  <h3>Counter2</h3>
  <p class="counter2">1000</p>
</div>
</div>

<button>start</button>

Answer 1

setInterval() 和 setTimeout() 在计时方面实际上并不可靠。我会结合使用 javascript 的 Date.now()，其中 returns 自浏览器 s/os 纪元以来的毫秒数。所以你可以做类似 this:w

const btn = document.querySelector('button');
const counter1 = document.querySelector('.counter1');
const counter2 = document.querySelector('.counter2');

btn.addEventListener('click', ()=> {
    increment(100, counter1);
  increment(1000, counter2);
})

const increment = (n, counter, length=1000) => {
  let start = Date.now()
  let end = start + length
  let interval = length / n;
  setInterval(() => {
    time = Date.now()
    if (time < end) {
      count = (time - start) / interval
      counter.textContent = count;
    } else {
      counter.textContent = n;
      clearInterval(this)
    };
  }, interval/2);
  
};

.counter-container {
 display: flex;
}

.counter {
  margin: 10px;
  text-align: center;
}
button {
  margin-left: 80px;
};

<div class="counter-container">
<div class="counter">
  <h3>Counter1</h3>
  <p class="counter1">100</p>
</div>
<div class="counter">
  <h3>Counter2</h3>
  <p class="counter2">1000</p>
</div>
</div>

<button>start</button>

如何实现一个在给定时间段内计数的计数器 JS？

How to implement a counter that counts in a given time duration JS?

javascript

counter

setinterval