Jak wstrzymać i wznowić licznik czasu?

Mam tę funkcję, która uruchamia zegar w tym formacie 00:00:00 po każdym kliknięciu przycisku. Ale nie wiem, jak przywrócić funkcje i zatrzymać. Znalazłem kilka fragmentów, które uważałem za pomocne, ale nie mogłem ich wykonać. Jestem nowy do używania obiektów w js.Jak wstrzymać i wznowić licznik czasu?

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() po prostu dodaje zer wiodących

Źródło

2012-09-19 esandrkwn

Myślę, że będzie lepiej, jeśli stworzysz obiekt zegara. Zobacz kod (patrz 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(); });

Źródło

2012-09-19 01:42:26

Dziękuję @Speransky. Przy takim podejściu w jaki sposób mogę wywołać pauzę lub wznowić kliknięcie przycisku? – esandrkwn

Jeszcze raz dziękuję. Mam to dla mnie. – esandrkwn

Nie jestem w stanie oprzeć się na użyciu siebie ... to w różnych miejscach ma inne znaczenie ... jestem trochę zdezorientowany .. możesz wyjaśnić. Mam różne podejście do tego http://jsfiddle.net/wMJuQ/ –

Zastosowanie window.clearInterval anulować powtarzających się działań, który został utworzony z wykorzystaniem setInterval().

clearInterval(delay);

Źródło

2012-09-19 01:28:00 xdazz

Jak można uruchomić go od setTime() znajduje się wewnątrz funkcji zegara()? – HeatfanJohn

@HeatfanJohn To zależy od znaczenia 'pause', jeśli chcesz tylko wstrzymać wyświetlanie i pozwolić timerowi kontynuować, a następnie nie używaj' clearInterval', po prostu przestań odświeżać wyświetlanie treści html. – xdazz

Po prostu wyczyszczenie odstępu czasu nie działa, ponieważ totalSeconds nie zostanie zwiększony. Chciałbym ustawić flagę, która określa, czy zegar jest wstrzymany, czy nie.

Ta flaga będzie po prostu ustawiona na wywołanie pause() lub unset po wznowieniu(). Wyodrębniłem wzrost totalSeconds do limitu czasu "tick", który zawsze będzie działał, nawet gdy jest wstrzymany (abyśmy mogli śledzić czas, kiedy zaczynamy).

Funkcja "Tik" zmieni tylko czas, jeśli zegar nie zostanie zatrzymany.

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

Źródło

2012-09-19 01:32:15 dcasadevall

Dziękuję. Spróbuję tego od razu. – 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>

Źródło

2016-03-16 17:05:04 VRN

Dodaj komentarze do swojego kodu – kvorobiev

Jak wstrzymać i wznowić licznik czasu?

Odpowiedz

Powiązane problemy