JavaScript如何循环数字计数器答案

【问题标题】：JavaScript how to loop number counterJavaScript如何循环数字计数器
【发布时间】：2022-01-21 21:00:04
【问题描述】：

我试图让以下数字计数器仅在滚动到一次后启动，然后在 5 或 10 秒后循环，请协助。我试过使用：

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

作为滚动功能但没有运气。请查看下面的代码。

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>

【问题讨论】：

所以不是在document.addEventListener("DOMContentLoaded", () => { 中调用函数，而是在第一个sn-p 中的if 中调用它们。然后，调用setInterval，在里面调用这些counterAnim函数。
@MoshFeu 谢谢，但我对 javascript 非常陌生，所以不知道如何完成这个

标签： javascript html jquery

【解决方案1】：

将 3 个动画移到一个函数中，这样您就可以一次启动它们（对于漂亮的代码，很高兴，但您可以复制代码）
不要在DOMContentLoaded 中调用counterAnim，而是根据您提到的if 条件调用它。
创建一个布尔变量来识别计数器是否已经到达视口一次，因为用户可以继续滚动页面，但您只想启动一次间隔。
到达视口后，开始间隔 (setInterval)。

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>

我真的鼓励您深入阅读我发布的代码片段，而不仅仅是复制/粘贴它们。

【讨论】：