Javascript Countdown Timer Repeat and Count total that repeat

Question

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 (count <= 0)
  {
    clearInterval(counter);
    return;
   }

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

div HTML

<span id="timer">25</span>

Now I want the countdown is repeat automatically after wait 5 seconds then it start again from 25 -> 0. And I want to count how many times that countdown repeat. Is it possible for that?

Please help.

Answer 1

var count=25;
var counter = null;

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

// init timer for first time
reset_timer();

function timer()
{
  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.

Answer 2

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 them var timerCounter = setInterval(countTimers, 30000); countTimers(); // run countTimers once to start function timer() { count = count-1; document.getElementById("timer").innerHTML=count; if(count <= 0) { clearInterval(counter); return; } } function countTimers() { 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: <span id="timer">25</span><br> Number of times run: <span id="totalcounter">1</span> <br><br> <button id="reset">Reset</button> <button id="stop">Stop</button> <button id="start">Start (if stopped)</button> 

Answer 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; let countDown = time => new Promise( (rs, rj) => interval = setInterval( ()=>{ if (isPaused) { return rj('Paused'); } secondsCounter.textContent = --actualSecond; if (actualSecond == 0){ actualSecond = time + 1; clearInterval(interval); rs(); } }, 1000)); let loop = time => countDown(time).then( ()=>{ totalCount.textContent = ++ttc; return Promise.resolve(null); }); let infinite = () => loop(25) .then(infinite) .catch(console.log.bind(console)); let stop = () => { clearInterval(interval); isPaused = true; } let resume = () => { console.log('Resumed'); isPaused = false; loop(actualSecond).then(infinite); } let start_stop = () => isPaused ? resume() : stop(); infinite(); 

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