Wie kann ich einen Timer pausieren und fortsetzen?

Ich habe diese Funktion, die einen Timer in diesem Format 00:00:00 startet, wenn ich auf eine Schaltfläche klicke. Aber ich weiß nicht, wie Funktionen fortsetzen und pausieren. Ich habe einige Ausschnitte gefunden, von denen ich dachte, dass sie hilfreich sein könnten, aber ich konnte diese nicht machen. Ich bin neu in der Verwendung von Objekten in js.Wie kann ich einen Timer pausieren und fortsetzen?

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() window.clearInterval kommt noch hinzu, führende Nullen

Quelle

2012-09-19 esandrkwn

Ich denke, es wird besser sein, wenn Sie Uhrobjekt erstellen werden. Siehe Code (siehe 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(); });

Quelle

2012-09-19 01:42:26

Danke @Speransky. Wie kann ich bei diesem Ansatz auf Knopfdruck pausieren oder fortsetzen? – esandrkwn

Nochmals vielen Dank. Ich habe diese für mich arbeiten lassen. – esandrkwn

Ich bin nicht in der Lage, die Verwendung von Selbst zu verstehen ... dies in Diff-Orten hat unterschiedliche Bedeutung ... Ich bin ein wenig verwirrt..können Sie bitte erklären. Ich habe eine andere Herangehensweise an diese http://jsfiddle.net/wMJuQ/ –

wiederholtem Gebrauch Vorgang abzubrechen, die sich mit der setInterval() gesetzt wurde.

clearInterval(delay);

Quelle

2012-09-19 01:28:00 xdazz

Wie würden Sie es seit setTime neu starten() innerhalb Funktion clock()? – HeatfanJohn

@HeatfanJohn Es hängt von der Bedeutung von "Pause" ab, wenn Sie nur die Anzeige anhalten und den Timer fortsetzen möchten, dann verwenden Sie nicht 'clearInterval', Sie müssen nur die Aktualisierung der Anzeige des HTML-Inhalts anhalten. – xdazz

Das Löschen des Intervalls funktioniert nicht, weil totalSeconds nicht inkrementiert wird. Ich würde ein Flag einrichten, das bestimmt, ob die Uhr pausiert ist oder nicht.

Dieses Flag würde einfach beim Aufruf von pause() gesetzt oder bei resume() zurückgesetzt werden. Ich habe den TotalSeconds-Anstieg auf einen 'Tick'-Timeout getrennt, der immer ausgeführt wird, selbst wenn er pausiert ist (damit wir die Zeit verfolgen können, wenn wir fortfahren).

Die Tick-Funktion aktualisiert daher nur die Uhrzeit, wenn die Uhr nicht pausiert ist.

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

Quelle

2012-09-19 01:32:15 dcasadevall

Vielen Dank Ich werde dieses sofort ausprobieren – 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>

Quelle

2016-03-16 17:05:04 VRN

Bitte fügen Sie Ihrem Code einige Kommentare hinzu – kvorobiev

Wie kann ich einen Timer pausieren und fortsetzen?

Antwort

Verwandte Themen