如何暫停和恢復計時器？

我得到這個功能，每當我點擊一個按鈕時，這個格式00:00:00啓動一個定時器。但我不知道如何做功能恢復和暫停。我發現了一些我認爲可能有用的片段，但我無法完成這些工作。我是在js中使用對象的新手。如何暫停和恢復計時器？

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

墊（）只是增加了前導零

來源

2012-09-19 esandrkwn

我認爲如果你會創建時鐘對象會更好。見代碼（見演示：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(); });

來源

2012-09-19 01:42:26

謝謝@Speransky。採用這種方法，我怎樣才能打電話暫停或繼續點擊按鈕？ – esandrkwn

再次感謝您。我得到了這個爲我工作。 – esandrkwn

我不能忍受自我的使用......這在不同的地方有不同的含義......我有點困惑......你可以解釋一下。我有一個不同的方法來這個http://jsfiddle.net/wMJuQ/ –

使用window.clearInterval取消其已設置使用setInterval()重複的動作。

clearInterval(delay);

來源

2012-09-19 01:28:00 xdazz

你將如何重新啓動它，因爲時刻設定（）是內部功能時鐘（）？ – HeatfanJohn

@HeatfanJohn它取決於'pause'的含義，如果你只是想暫停顯示並讓計時器繼續，那麼不要使用'clearInterval'，你只需要停止刷新html內容的顯示。 – xdazz

只是清除間隔將不起作用，因爲totalSeconds不會增加。我會設置一個標誌，確定時鐘是否暫停。

這個標誌只會在調用pause（）或者resume（）時取消設置。我將totalSeconds增加值分隔爲一個'tick'超時值，即使在暫停時（以便我們可以跟蹤恢復的時間），該超時值將始終運行。

如果時鐘沒有暫停，則滴答功能將僅更新時間。

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

來源

2012-09-19 01:32:15 dcasadevall

謝謝我會馬上試試這一個 – 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>

來源

2016-03-16 17:05:04 VRN

請在您的代碼中添加一些註釋 – kvorobiev

如何暫停和恢復計時器？

回答

相關問題