¿cómo pausar y reanudar un temporizador?

Obtuve esta función que inicia un temporizador en este formato 00:00:00 cada vez que hago clic en un botón. Pero no sé cómo hacer las funciones reanudar y pausar. He encontrado algunos fragmentos que pensé que podrían ser útiles, pero no pude hacer que funcionen. Soy nuevo en el uso de objetos en js.¿cómo pausar y reanudar un temporizador?

function clock() { 
    var pauseObj = new Object(); 

    var totalSeconds = 0; 
    var delay = setInterval(setTime, 1000); 

    function setTime() { 
    var ctr; 
    $(".icon-play").each(function() { 
     if ($(this).parent().hasClass('hide')) ctr = ($(this).attr('id')).split('_'); 
    }); 

    ++totalSeconds; 
    $("#hour_" + ctr[1]).text(pad(Math.floor(totalSeconds/3600))); 
    $("#min_" + ctr[1]).text(pad(Math.floor((totalSeconds/60) % 60))); 
    $("#sec_" + ctr[1]).text(pad(parseInt(totalSeconds % 60))); 
    } 
}

de control() sólo añade ceros a la izquierda

Fuente

2012-09-19 esandrkwn

Creo que será mejor si crea un objeto de reloj. Ver código (ver demo: http://jsfiddle.net/f9X6J/):

var Clock = { 
    totalSeconds: 0, 

    start: function() { 
    var self = this; 

    this.interval = setInterval(function() { 
     self.totalSeconds += 1; 

     $("#hour").text(Math.floor(self.totalSeconds/3600)); 
     $("#min").text(Math.floor(self.totalSeconds/60 % 60)); 
     $("#sec").text(parseInt(self.totalSeconds % 60)); 
    }, 1000); 
    }, 

    pause: function() { 
    clearInterval(this.interval); 
    delete this.interval; 
    }, 

    resume: function() { 
    if (!this.interval) this.start(); 
    } 
}; 

Clock.start(); 

$('#pauseButton').click(function() { Clock.pause(); }); 
$('#resumeButton').click(function() { Clock.resume(); });

Fuente

2012-09-19 01:42:26

Gracias @Speransky. Con este enfoque, ¿cómo puedo llamar a pausa o reanudar al hacer clic en un botón? – esandrkwn

Gracias de nuevo. Tengo este trabajando para mí. – esandrkwn

No soy capaz de entender el uso de sí mismo ... esto en diferentes lugares tiene un significado diferente ... estoy un poco confundido ... puedes explicarlo. Tengo un enfoque diferente para esto http://jsfiddle.net/wMJuQ/ –

Uso window.clearInterval para cancelar la acción repetida que se creó utilizando setInterval().

clearInterval(delay);

Fuente

2012-09-19 01:28:00 xdazz

¿Cómo le reiniciarlo desde setTime() que está dentro de la función de reloj()? – HeatfanJohn

@HeatfanJohn Depende del significado de 'pause', si solo quieres pausar la pantalla y dejar que el temporizador continúe, entonces no uses' clearInterval', solo tienes que dejar de actualizar la visualización del contenido html. – xdazz

Limpiar el intervalo no funcionaría, porque totalSeconds no aumentaría. Configuraría una bandera que determina si el reloj está en pausa o no.

Esta bandera simplemente se configurará al llamar a pause() o al reiniciar(). Separé el total de los segundos aumento a un tiempo de espera 'tic' que siempre se ejecutará, incluso cuando está en pausa (para que podamos hacer un seguimiento del tiempo cuando reanudamos).

La función de marcación solo actualizará la hora si el reloj no está en pausa.

function clock() 
{ 
    var pauseObj = new Object(); 

    var totalSeconds = 0; 
    var isPaused = false; 
    var delay = setInterval(tick, 1000); 

    function pause() 
    { 
     isPaused = true; 
    } 

    function resume() 
    { 
     isPaused = false; 
    } 

    function setTime() 
    { 
     var ctr; 
     $(".icon-play").each(function(){ 
      if($(this).parent().hasClass('hide')) 
       ctr = ($(this).attr('id')).split('_'); 
     }); 

     $("#hour_" + ctr[1]).text(pad(Math.floor(totalSeconds/3600))); 
     $("#min_" + ctr[1]).text(pad(Math.floor((totalSeconds/60)%60))); 
     $("#sec_" + ctr[1]).text(pad(parseInt(totalSeconds%60))); 
    } 

    function tick() 
    { 
     ++totalSeconds; 

     if (!isPaused) 
      setTime(); 
    } 
}

Fuente

2012-09-19 01:32:15 dcasadevall

Gracias Voy a probar este de inmediato – esandrkwn

<html> 
    <head><title>Timer</title> 
    <script> 

    //Evaluate the expression at the specified interval using setInterval() 
    var a = setInterval(function(){disp()},1000); 

    //Write the display() for timer 
    function disp() 
    { 
     var x = new Date(); 

     //locale is used to return the Date object as string 
     x= x.toLocaleTimeString(); 

     //Get the element by ID in disp() 
     document.getElementById("x").innerHTML=x; 
    } 
    function stop() 
    { 
     //clearInterval() is used to pause the timer 
     clearInterval(a); 
    } 
    function start() 
    {  
     //setInterval() is used to resume the timer 
     a=setInterval(function(){disp()},1000); 
    } 

    </script> 
    </head> 
    <body> 
    <p id = "x"></p> 
    <button onclick = "stop()"> Pause </button> 
    <button onclick = "start()"> Resume </button> 
    </body> 
    </html>

Fuente

2016-03-16 17:05:04 VRN

Por favor, agregue algunos comentarios a su código – kvorobiev

¿cómo pausar y reanudar un temporizador?

Respuesta

Cuestiones relacionadas