Javascript Countdown Timer Repeat And Count Total That Repeat

I have javascript countdown timer from 25 -> 0. var count=25; var counter=setInterval(timer, 1000); //1000 will run it every 1 second function timer() { count=count-1; if

Solution 1:

You can try wrapping the entire code into a function (countTimers() in the example below) that runs every 30 seconds (5 seconds after each timer). Then, set a counter (timersCount in the example below) to count how many times that will run.

See the example below:

var timersCount = 0, stopped = false, count, counter; // make count, counter global variables so buttons can access themvar timerCounter = setInterval(countTimers, 30000);
countTimers(); // run countTimers once to startfunctiontimer() {
  count = count-1;
  document.getElementById("timer").innerHTML=count;
  if(count <= 0) {
    clearInterval(counter);
    return;
  }
}
functioncountTimers() {
  timersCount++;

  // as per request in the comments, you can set a timer counter as well:document.getElementById("totalcounter").innerHTML = timersCount;

  count = 25;
  counter = setInterval(timer, 1000);

}

// button code:document.getElementById("reset").addEventListener("click", function() {
  clearInterval(timerCounter);
  clearInterval(counter);
  count = 25;
  document.getElementById("timer").innerHTML=count;
  timersCount = 0;
  document.getElementById("totalcounter").innerHTML = timersCount;
  stopped = true;
});
document.getElementById("stop").addEventListener("click", function() {
  if(stopped)
    return;
  clearInterval(counter);
  stopped = true;
});
document.getElementById("start").addEventListener("click", function() {
  if(!stopped)
    return;
  stopped = false;
  counter = setInterval(timer, 1000);
  setTimeout(function() {
    clearInterval(counter);
    timerCounter = setInterval(countTimers, 30000);
    countTimers();
  }, count*1000);
});

Timer: <spanid="timer">25</span><br>
Number of times run: <spanid="totalcounter">1</span><br><br><buttonid="reset">Reset</button><buttonid="stop">Stop</button><buttonid="start">Start (if stopped)</button>

Solution 2:

var count=25;
var counter = null;

// reset count and timerfunctionreset_timer()
{
    count = 25;
    counter=setInterval(timer, 1000); //1000 will  run it every 1 second
}

// init timer for first timereset_timer();

functiontimer()
{
  count--;
  if (count <= 0)
  {
    clearInterval(counter);
    setTimeout(reset_timer, 5000);
    return;
   }

 document.getElementById("timer").innerHTML=count; // watch for spelling
 }

setTimeout is a timer that runs one time and stop.

Solution 3:

This approach uses Promises to the countdown work and generate an infinite loop, if for some reason you need to stop/resume your counter you can reject the Promise chain and have a boolean to control the state:

let secondsCounter = 
    document.querySelector('#secondsCounter'),
    totalCount =
    document.querySelector('#totalCount'),
    ttc = 1,
    actualSecond = 25,
    isPaused = false,
    interval;

letcountDown = time => newPromise( (rs, rj) =>   interval = setInterval( ()=>{
    if (isPaused) {
      returnrj('Paused');
    }
    secondsCounter.textContent = --actualSecond;
    if (actualSecond == 0){
      actualSecond = time + 1;
      clearInterval(interval);
      rs();
    }
  }, 1000));

letloop = time => countDown(time).then( ()=>{
  totalCount.textContent = ++ttc;
  returnPromise.resolve(null);
});

letinfinite = () => loop(25)
  .then(infinite)
  .catch(console.log.bind(console));

letstop = () => {
  clearInterval(interval);
  isPaused = true;
}

letresume = () => {
  console.log('Resumed');
  isPaused = false;
  loop(actualSecond).then(infinite);
}

letstart_stop = () => isPaused ? 
  resume() : stop();

infinite();

Seconds : <divid="secondsCounter">25</div>
Times   : <divid="totalCount">1</div><buttononclick="start_stop()">Start/Stop</button>