jQuery reiniciar el temporizador setInterval

Question

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

Quiero que el temporizador para poner a cero cuando se hace clic en #Desact.

Answer 1

Debe dejar su variable "temporizador" en un alcance que esté disponible la próxima vez que llame a la función myTimer para que pueda borrar el intervalo existente y restablecerlo con un nuevo intervalo. Proveedores:

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

Borrar el temporizador cada vez que se initalized, de esa manera todo lo que tiene que hacer es llamar de nuevo la función de restablecer el tiempo:

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 3

Se podía volver escribir su función myTimer() así:

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

Ahora, cada vez que yo Usted llama al myTimer(), el setInterval se restablece.

Answer 4

o que podría hacer algo en este sentido:

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

y ejecutar cuando se necesita:

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

Answer 5

Aquí hay un enfoque que está más en sintonía con la forma en que se diseñó JS (como un lenguaje funcional para aquellos que aún no lo saben). En lugar de depender de una variable global, utilice un cierre:

$("#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's the interval counter: 15, passed as argument to closure 
      })(15),1000)));//set interval returns timer id, passed as argument to closure 
}); 

Ahora tengo que admitir esto es bastante complicado (y no probado) pero de esta manera no restablece evento sólo está disponible cuando es necesario, y no se está usando cualquier globo terráqueo. Pero lo más importante, aquí es donde radica el poder de JS: funciona como objetos de 1ª clase, pasando como argumentos y valores de retorno ... sólo tiene que ir función loco :)

He creado un Fiddle de trabajo, también

Answer 6

También podría usar un plugin de temporizador jQuery, entonces no necesita pasar la Variable.

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

Ejemplo para el plugin: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/