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.

What is currently preventing you from stopping the intervals with the interval references you save? — Dave Newton, Jan 11 '22 at 04:38
You need to use `clearInterval(yourInterval);` to stop the execution. — Bikki Mahato, Jan 11 '22 at 04:39
Does this answer your question? [Stop setInterval call in JavaScript](https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) — skara9, Jan 11 '22 at 04:39

score 1 · Accepted Answer · answered Jan 11 '22 at 04:54

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>

answered Jan 11 '22 at 04:54

Mister Jojo

20,093
6
21
40

I tested the speed is very low – Jan 11 '22 at 04:57
@MahmoudKhosravi the speed is depending on the delay, your computer processor, and what else.... But don't forget the Delay argument is just a minimal value, not a chronometric time – Mister Jojo Jan 11 '22 at 05:02

Carsten Massmann · Answer 2 · 2022-01-11T05:33:02.727

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>

How to stop setInterval with javasript?

2 Answers2