come faccio a mettere in pausa e riprendere un timer?

Ho questa funzione che avvia un timer in questo formato 00:00:00 ogni volta che clicco su un pulsante. Ma non so come fare le funzioni riprendere e mettere in pausa. Ho trovato alcuni frammenti che ho pensato potrebbero essere utili ma non potrei farli funzionare. Sono nuovo nell'usare oggetti in js.come faccio a mettere in pausa e riprendere un timer?

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

pad() aggiunge solo zeri

fonte

2012-09-19 esandrkwn

Penso che sarà meglio se creerai l'oggetto orologio. Vedere codice (vedere 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(); });

fonte

2012-09-19 01:42:26

Grazie @Speransky. Con questo approccio, come posso chiamare la pausa o riprendere la selezione di un pulsante? – esandrkwn

Grazie ancora. Ho ottenuto questo lavoro per me. – esandrkwn

Non sono in grado di sostenere l'uso di sé ... questo in diff ha un significato diverso ... sono un po 'confuso ... puoi spiegarlo per favore. Ho un approccio diverso a questo http://jsfiddle.net/wMJuQ/ –

Usa window.clearInterval per annullare un'azione ripetuta che è stato istituito con setInterval().

clearInterval(delay);

fonte

2012-09-19 01:28:00 xdazz

Come ti riavviarlo dal setTime() è dentro di clock function()? – HeatfanJohn

@HeatfanJohn Dipende dal significato di 'pause', se vuoi solo mettere in pausa il display e lasciare che il timer continui, quindi non usare' clearInterval', devi solo interrompere l'aggiornamento della visualizzazione del contenuto html. – xdazz

L'azzeramento dell'intervallo non avrebbe funzionato, perché TotalSeconds non sarebbe stato incrementato. Vorrei impostare un flag che determina se l'orologio è in pausa o meno.

Questo flag verrebbe semplicemente impostato su calling pause() o unset su resume(). Ho separato l'aumento di TotalSeconds a un timeout "tick" che sarà sempre in esecuzione, anche quando è in pausa (in modo da poter tenere traccia del tempo in cui riprendiamo).

La funzione di spunta aggiornerà quindi l'ora solo se l'orologio non è in 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(); 
    } 
}

fonte

2012-09-19 01:32:15 dcasadevall

Grazie, proverò subito questo fuori – 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>

fonte

2016-03-16 17:05:04 VRN

Per favore, aggiungi alcuni commenti al tuo codice – kvorobiev

come faccio a mettere in pausa e riprendere un timer?

risposta

Problemi correlati