How to stop setInterval with javasript?-CodePudding

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

HTML

<span > 709   </span>
<span > 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.

CodePudding user response：

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 > 709   </span>
  <span > 54  </span>

CodePudding user response：

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

CodePudding user response：

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 > 709   </span>
<span > 54   </span>