如何在JavaScript / Jquery中重置计时器？

Question

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);
            }

Answer 1

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.

Answer 2

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);

}

Answer 3

Try to reference your Interval with a variable.

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


// Button Click ->
clearInterval(myInterval);

Answer 4

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.

Answer 5

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)