如何用 javasript 停止 setInterval？

Question

我想从 0 开始。直到它到达数字 709 和 54，停止它。

HTML

<span class="card-title h5 counter"> 709 + </span>
<span class="card-title h5 counter"> 54+ </span>

脚本.js

let intervals = [];
let counter  = [];
let elements = document.getElementsByClassName('counter');
Array.from(elements).forEach((element, index) => {
    counter[index] = 0;
    intervals[index] = setInterval(()=> {
            counter[index]++;
            element.innerText=counter;
        }
        , 50);
})

但这段代码会无限期地继续下去，不会结束。

Answer 1

这边走...

对两者使用相同的setInterval ，并在没有更多计数器递增时将其清除。

 const elements = [...document.querySelectorAll('.counter')].map(el=>({el,counter:parseInt(el.textContent), val:-1})) let intervalReference = setInterval(() => { let endingCount = 0 elements.forEach(refs => { if ( refs.val < refs.counter) refs.el.textContent = ` ${++refs.val} + ` else ++endingCount }) if (endingCount===elements.length) clearInterval(intervalReference) }, 50)

 <span class="card-title h5 counter"> 709 + </span> <span class="card-title h5 counter"> 54+ </span>

Answer 2

您可以使用下面的代码片段，setInterval 可以在 clearInterval 的帮助下停止。

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 709) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

Answer 3

您也可以在两个单独的setInterval()调用中执行此操作。 每一个都在自己的 scope 中定义。 这样就不需要设置 arrays 来存储 scope 之外的值和引用：

 [...document.querySelectorAll('.counter')].forEach(e=>{ let i=0; const n=parseInt(e.textContent), h=setInterval(()=>{ if(i<n) e.textContent=++i +" + "; else clearInterval(h); },20) });

 <span class="card-title h5 counter"> 709 + </span> <span class="card-title h5 counter"> 54 + </span>