问JavaScript如何循环数字计数器

EN

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);
};

const animateTexts = () => {
  counterAnim("#count1", 0, 10000, 8000);
  counterAnim("#count2", 0, 40, 8000);
  counterAnim("#count3", 0, 5, 8000);
}

let initiatedInterval = false;
$('#yourdiv').scroll(function() {
  if ($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight()) {
    animateTexts();

    if (!initiatedInterval) {
      initiatedInterval = true;
      // 8,000 - animation time + 10,000 - delay
      setInterval(animateTexts, 18_000);
    }
  }
});

body {
  margin: 0;
}

#yourdiv {
  height: 100vh;
  background: red;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="yourdiv">
  <div style="height: 500px;">Placeholder with 500px height, please scroll</div>
  <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>
</div>