如何在10秒后循环数字计数器？

Question

我试着让下面的数字计数器只启动一次，然后在10秒后循环，谁能帮我一下吗？

​

const counterAnim = (qSelector, start = 0, end, duration = 8000) => {
 const target = document.querySelector(qSelector);
 let startTimestamp = null;
 const step = (timestamp) => {
  if (!startTimestamp) startTimestamp = timestamp;
  const progress = Math.min((timestamp - startTimestamp) / duration, 1);
  target.innerText = Math.floor(progress * (end - start) + start);
  if (progress < 1) {
   window.requestAnimationFrame(step);
  }
 };
 window.requestAnimationFrame(step);
};
//#endregion - end of - number counter animation

document.addEventListener("DOMContentLoaded", () => {
 counterAnim("#count1", 0, 10000,8000);
 counterAnim("#count2", 0, 40, 8000);
 counterAnim("#count3", 0, 5, 8000);
});

<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count1" class="display-4"></span>+  </h2>
<p class="subtitle">lorem ipsum</p>
</div>

<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count2" class="display-4"></span>+  YEARS</h2>
<p class="subtitle">lorem ipsum</p>
</div>

<div class="ohio-heading-sc heading text-left" id="ohio-custom-61aa36a52809a">
<h2 class="title"><span id="count3" class="display-4"></span>   YEAR</h2>
<p class="subtitle">lorem ipsum</p>
</div>

​

Answer 1

您已经完成了大部分设置，只需将第一个counterAnim调用附加到滚动监听器，然后在10秒后启动超时，将startTimestamp重置为null。

let startTimestamp = null;

const counterAnim = (qSelector, start = 0, end, duration = 8000) => {
 const target = document.querySelector(qSelector);
 const step = (timestamp) => {
  if (!startTimestamp) startTimestamp = timestamp;
  const progress = Math.min((timestamp - startTimestamp) / duration, 1);
  target.innerText = Math.floor(progress * (end - start) + start);
  if (progress < 1) {
   window.requestAnimationFrame(step);
  }
 };

 // reset to the start condition. If you want this to happen multiple times, use setInterval
 setTimeout(() => {
   startTimestamp = null;
 }, 10000);

 window.requestAnimationFrame(step);
};

document.addEventListener("scroll", () => {
 counterAnim("#count1", 0, 10000,8000);
 counterAnim("#count2", 0, 40, 8000);
 counterAnim("#count3", 0, 5, 8000);
}