CODEWITHSUNDEEP
javascriptjquerytimer
sTg
sTg

Reputation: 4424

How do i reset the timer in javascript/Jquery?

I have a timer that begins when my application loads. But i want to reset my timer on click of button. But when i try to reset the timer weird values starts getting displayed in timer section.

Please find my code below:

HTML:

    <font size="4"><span class="myClass" id="time">02:00</span></font>   
<button onclick="myFunction()">Click me</button>

Javascript:

$( document ).ready(function() 
            {
                var minute = 60 * 2,
                display = document.querySelector('#time');
                begin(minute, display);

            });


function myFunction()
{
var minute = 60 * 2,
display = document.querySelector('#time');
begin(minute, display);

}

    function begin(duration, display) {
                var timer = duration, minutes, seconds;
                setInterval(function () {
                    minutes = parseInt(timer / 60, 10)
                    seconds = parseInt(timer % 60, 10);

                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    display.textContent = minutes + ":" + seconds;

                    if (--timer < 0) 
                    {
                        timer = duration;
                    }
                }, 1000);
            }

Upvotes: 0

Views: 1182

Answers (5)

ntn
ntn

Reputation: 340

Javascript setInterval() method returns an interval Id which can be used to terminate/stop the interval. Using clearInterval() function the the loop of method execution can be stopped.

In you case just store the interval Id and on click event function add the clearInterval(intervalId) function and pass the interval Id.

var intervalId = null;
    myFunction(){
         if(intervalId != null){
          clearInterval(intervalId);
         }
    var minute = 60 * 2;
        display = document.querySelector('#time');
        begin(minute, display);
    }

Store the interval Id

intervaluId = setInterval(function(){ ....
                          },1000)

Upvotes: 0

hobomaan
hobomaan

Reputation: 151

I think you have multiple intervals running at the same time so you need to clean them up using clearInterval(interval);

$( document ).ready(function() 
        {
            var minute = 60 * 2,
            display = document.querySelector('#time');
            begin(minute, display);

        });
var interval;

function myFunction()
{
var minute = 60 * 2,
display = document.querySelector('#time');
clearInterval(interval);
begin(minute, display);
}

function begin(duration, display) {
            var timer = duration, minutes, seconds;
            interval = setInterval(function () {
                minutes = parseInt(timer / 60, 10)
                seconds = parseInt(timer % 60, 10);

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds;

                if (--timer < 0) 
                {
                    timer = duration;
                }
            }, 1000);
        }

something like this.

Upvotes: 1

kawadhiya21
kawadhiya21

Reputation: 2528

You need to stop the setInterval. So make a global variable var refreshIntervalId = null. Inside begin() function, insert this line at the top

if (refreshIntervalId) {
    clearInterval(refreshIntervalId);
}

and call setInterval like this

refreshIntervalId = setInterval(function () { ..

That is good enough.

Upvotes: 0

Tim S.
Tim S.

Reputation: 389

Try to reference your Interval with a variable.

var myInterval = setInterval(function(){
....
....
....
},1000);


// Button Click ->
clearInterval(myInterval);

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

In your my function reset the timer value using innerHTML or innerTEXT

function myFunction()
{
  var minute = 60 * 2,
  display = document.querySelector('#time');
  display.innerHTML = '02:00';
  begin(minute, display);

}

Upvotes: 0

Related Questions