How do i reset the timer in 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);
            }

Totally off topic, but why not call myFunction in document ready? That's all you seem to be doing in there anyway. Also font tag is obsolete and shouldn't be used — Pete
– Pete, Commented Dec 1, 2016 at 12:34

hobomaan · Accepted Answer · 2016-12-01 12:15:08Z

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.

Tim S. · Accepted Answer · 2016-12-01 12:13:56Z

0

Try to reference your Interval with a variable.

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


// Button Click ->
clearInterval(myInterval);

answered Dec 1, 2016 at 12:13

Tim S.

3891 silver badge5 bronze badges

Comments

Sudharsan S · Accepted Answer · 2016-12-01 12:10:31Z

0

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

}

answered Dec 1, 2016 at 12:10

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Comments

kawadhiya21 · Accepted Answer · 2016-12-01 12:14:50Z

0

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.

answered Dec 1, 2016 at 12:14

kawadhiya21

2,52823 silver badges34 bronze badges

Comments

ntn · Accepted Answer · 2016-12-01 12:35:37Z

0

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)

edited Dec 1, 2016 at 12:35

answered Dec 1, 2016 at 12:23

ntn

3402 gold badges4 silver badges12 bronze badges

Collectives™ on Stack Overflow

How do i reset the timer in javascript/Jquery?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related