CODEWITHSUNDEEP
javascriptcountdown
Stranger B.
Stranger B.

Reputation: 9364

How to define a simple countdown which restart automatically in Javascript

I need a simple countdown for counting down 30 seconds, But I want when 30 seconds is over the counting down starts again.

the countdown starts only for one time, the countdown doesn't restart

I couldn't manage to do that, here is my code :

var i = 1;
  function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {
  instance.stop();
  counterEnd();
  return; 
}
    seconds--;
  }

  this.start = function () {
    
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };

  this.stop = function () {
    clearInterval(timer);
  };
}





var myCounter = new Countdown({  
    seconds:5,  // number of seconds to count down
    onUpdateStatus: function(sec){$('#countdown').html(sec);}, // callback for each second
    onCounterEnd: function(){    
  myCounter.start();
    } // final action
});

myCounter.start();
$("#button").click(function() {
  myCounter.start();
  });  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="countdown"></p>
 <button type="button" id="button">restart</button>

Do you have any idea how to solve that ??

Thanks

Upvotes: 0

Views: 1990

Answers (5)

David
David

Reputation: 1

Just wrote this fiddle for fun:

function mySwitch() {
    button = document.getElementById("button");
    number = document.getElementById("number");
    startnumber = number.value;
    if (button.value == "Start") {
        button.value = "Stop";
        myInterval = setInterval(function () {myCounter()},1000);
    }else{
        button.value = "Start";
        clearInterval(myInterval);
    }
}

function myCounter() {
    if (number.value > 0) {
        number.value = number.value -1;
    }else{
        number.value = startnumber;
    }
}

Upvotes: 0

Victory
Victory

Reputation: 5890

You are calling counter.stop after your call back. So you are starting then immediately stopping the new counter. Switch the order like so

if (seconds === 0) {
  instance.stop();
  counterEnd();
  return; // don't want to decriment after counterEnd();
}

Upvotes: 1

aCa
aCa

Reputation: 157

Just had to do some small modifications to you code to get it to work:

var i = 1;
function Countdown(options) {
  var timer,
  instance = this,
  seconds = options.seconds || 10,
  updateStatus = options.onUpdateStatus || function () {},
  counterEnd = options.onCounterEnd || function () {};

  function decrementCounter() {
    updateStatus(seconds);
    if (seconds === 0) {    
        seconds = 5;
    } else {
        seconds--;
    }
  }

  this.start = function () {
    clearInterval(timer);
    timer = 0;
    seconds = options.seconds;
    timer = setInterval(decrementCounter, 1000);
  };
}

var myCounter = new Countdown({  
    seconds: 5,  // number of seconds to count down
    onUpdateStatus: function(sec){$('#countdown').html(sec);}, // callback for each second
    onCounterEnd: function(){  myCounter.start(); } // final action
});

myCounter.start();

https://jsfiddle.net/6fc14935/

Upvotes: 0

tech-gayan
tech-gayan

Reputation: 1413

window.setInterval(function(){
  myCounter.start();
}, 30000);

Hope this helps

Upvotes: 0

user3566111
user3566111

Reputation: 178

Here is what I have used in the past.

JSFiddle 

var refreshTime = 30,   //Total refresh time
    failTime = 30,      //Refresh time 
    timer,              //Holds the interval
    counter;            //Holds the count number (Seconds)


$(document).ready(function(){
    counter = refreshTime;
    $('#time').text(counter+" ");

    timer = setInterval(countDown, 1000);
});


function countDown(){
    $("#time").html(counter+" ");
    if(counter == 0){
          counter = failTime;
    }else{
        counter--;
    }
}

Upvotes: 2

Related Questions