我该如何暂停和恢复计时器？ [英] how do I pause and resume a timer?

问题描述

我得到这个函数，每当我点击一个按钮，就会以这种格式00:00:00启动一个定时器。但我不知道如何做功能恢复和暂停。我发现了一些我认为可能有用的片段，但我无法完成这些工作。

  function clock（）{
 var pauseObj = new Object（） ; 
 
 var totalSeconds = 0; 
 var delay = setInterval（setTime，1000）; 
 
函数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）））; $（）
 
 
 
 
 
 $ b 
 pad（）只是增加了前导零点
解决方案
我认为如果您创建时钟对象会更好。查看代码（请参阅演示： 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）; 
删除this.interval; 
}，
 
 resume：function（）{
 if（！this.interval）this.start（）; 
} 
}; 
 
 Clock.start（）; 
 
 $（'＃pauseButton'）。click（function（）{Clock.pause（）;}）; 
 $（'＃resumeButton'）。click（function（）{Clock.resume（）;}）; 
  
 
I got this function that starts a timer on this format 00:00:00 whenever I click on a button. But I don't know how to do functions resume and pause. I've found some snippets that I thought could be helpful but I couldn't make those work. I'm new to using objects in 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)));
  }
}
pad() just adds leading zeros
解决方案
I think it will be better if you will create clock object. See code (see 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(); });


                        
这篇关于我该如何暂停和恢复计时器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！