JQuery reset setInterval timer

Question

My jQuery:

function myTimer() { var sec = 15 var timer = setInterval(function() { $('#timer').text(sec--); if (sec == -1) { clearInterval(timer); alert('done'); } } , 1000); } $("#knap").click(function() { myTimer(); }); $("#reset").click(function() { // set timer to 15 sec again.. }); 

I want the timer to reset when clicking reset.

Answer 1

You need to leave the timer variable in the area available the next time you call myTimer so that you can clear the existing interval and reset with the new interval. Try:

 var timer; functionn myTimer() { var sec = 15 clearInterval(timer); timer = setInterval(function() { $('#timer').text(sec--); if (sec == -1) { clearInterval(timer); alert('done'); } } , 1000); } $("#knap").click(function() { myTimer(); }); $("#reset").click(function() { myTimer(); }); 

Answer 2

or you can do something in this direction:

 var myTimer = function(){ var that = this, time = 15, timer; that.set = function() { console.log('setting up timer'); timer = setInterval(function(){ console.log('running time: ' + time); },1000); } that.reset = function(){ console.log('clearing timer'); clearInterval(timer); } return that; }(); 

and run when you need:

myTimer.set (); myTimer.reset ();

Answer 3

You can re-write your myTimer() function as follows:

 function myTimer() { var sec, timer = null; myTimer = function() { sec = 15; clearInterval( timer ); timer = setInterval(function() { $('#timer').text(sec--); if (sec == -1) { clearInterval(timer); alert('done'); } } , 1000); }; myTimer(); } 

Now when you call myTimer() , setInterval gets reset.

Answer 4

Reset the timer every time it starts, so all you have to do is call the timer reset function again:

 var timer; function myTimer(sec) { if (timer) clearInterval(timer); timer = setInterval(function() { $('#timer').text(sec--); if (sec == -1) { clearInterval(timer); alert('done'); } }, 1000); } $("#knap, #reset").click(function() { myTimer(15); }); 

Fiddle

Answer 5

Here's an approach that more closely matches how JS was designed (as a functional language for those who don't know yet). Instead of relying on a global variable, use closure:

 $("#knap").click(function start()//named callback to bind && unbind: { $(this).unbind('click');//no need to start when started $("#reset").unbind('click').click((function(timer) {//timer is in scope thanks to closure return function() {//resets timer clearInterval(timer); timer = null; $('#knap').click(start);//bind the start again //alternatively, you could change the start button to a reset button on click and vice versa } })(setInterval((function(sec) { return function() { $('#timer').text(sec--); if (sec === -1) { $('#reset').click();//stops interval $('#reset').unbind('click');//no more need for the event alert('done'); }//here the interval counter: 15, passed as argument to closure })(15),1000)));//set interval returns timer id, passed as argument to closure }); 

Now I admit that this is pretty messy (and unchecked), but that way there the reset event is only available when it is needed, and you are not using any global variables. But to a decisive extent, this is where the power of JS is located: it functions as first-class objects, passing them as arguments and return values ​​... just go to the crazy function :)

I also created a working feed

Answer 6

You can also use the jQuery timer plugin, then you do not need to pass a variable.

Plugin: http://archive.plugins.jquery.com/project/timers

Example for the plugin: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/