如何暂停和恢复计时器？

我得到这个功能，每当我点击一个按钮时，这个格式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

如何暂停和恢复计时器？

回答

相关问题