How to stop setInterval with javasript?

Question

I want to start from 0. Until it reaches the numbers 709 and 54, Stop it.

HTML

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

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

But this code goes on indefinitely and does not end.

Answer 1

this way...

use the same setInterval for both, and clear it when there is no more counter to increment.

 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

You can use the below code snippet, the setInterval can be stopped with the help of 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

You can also do it in two separate setInterval() calls. Each one is defined within their own scope. This way there is no need to set up arrays for storing the values and references outside the 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>