CODEWITHSUNDEEP
javascriptjquery
Marius
Marius

Reputation: 141

setInterval countDown update time

I have this countDown, each time I press the buttons I want to add 5 more seconds.

When the time is updated the function count down the new value but the old value as well.

Can someone explain me why?

http://jsfiddle.net/xqdj3uz8/1/

$('button').on('click', function() {
    var newtime = parseInt(seconds + 5);
    timer(newtime);    
});

Upvotes: 2

Views: 694

Answers (4)

johanthuresson
johanthuresson

Reputation: 580

You are adding new intervals that are independent form each other, try:

var time = 5;
var seconds = 5;

function timer() {
  var interval = setInterval(countDown, 1000);    
  function countDown() {

    $('span').text(time);
    if(time === 0) {
        clearInterval(interval);
    }
    time--;        
  }        
}

timer();

$('button').on('click', function() {  
  if(time==0){
    timer();
  }
  time += seconds;
});

Upvotes: -1

Danilo
Danilo

Reputation: 2686

You could try by using a global variable to track the amount of seconds left. Clicking on the button will increment this variable.

var timeLeft = 10;

function timer() {
    var i = setInterval(function () {
        $('span').text(timeLeft);
        timeLeft--
        if (timeLeft === 0) clearInterval(i)
    }, 1000)
}

function addSeconds(n) {
    timeLeft += n
}

timer()

$('button').on('click', function () {
    addSeconds(5)
});

Demo (1): http://jsfiddle.net/xqdj3uz8/21/

Upvotes: 2

prog1011
prog1011

Reputation: 3495

Try This

Working JSFIDDLE

var gblTime=0;
function timer(time) {
    var interval = setInterval(countDown, 1000); 
    gblTime = time;
    function countDown() {
        gblTime--;
        $('span').text(gblTime);

        if(gblTime <= 0) {
            clearInterval(interval);
        }

    }        
}

var seconds = 5;
timer(seconds);

$('button').on('click', function() {

    gblTime = parseInt(gblTime +1+ 5);
    //timer(newtime);    
});

Upvotes: 1

Apolon Pachulia
Apolon Pachulia

Reputation: 60

please use it

function timer(time) {
    var interval = setInterval(countDown, 1000);    
    function countDown() {
        time--;
        $('span').text(time);

        if(time === 0) {
            clearInterval(interval);
        }

    }      



    $('button').on('click', function() {

         time=parseInt(time + 5);
         $('span').text(time); 

    });
}

var seconds = 5;
timer(seconds);

Upvotes: 1

Related Questions