js：在暫停/恢復後觸發一個計時事件

Question

我想在特定時間後觸發某個事件。計時器應該是可以使用的。 下面是代碼： http://jsfiddle.net/xsH8v/

的問題是，我怎樣才能觸發此

if (Clock.totalSeconds >= givenTime){ 
    alert('time is up!'); 
    } 

我把它放在document.ready。但時間到了，它不會被解僱。我認爲問題在於函數根本不會被調用。如果是這樣，我該如何觸發它？

Answer 1

你的方法是行不通的，因爲if語句只計算一次;在文件加載。要解決這個問題，您需要添加每次更新totalSeconds時檢查的回調。

這是我的解決方案; fiddle here

可以使用Clock.at(time, callback)添加功能，像這樣：

Clock.at（10，函數（）{/ *10秒傳遞* /}）;

var Clock = { 
    totalSeconds: 0, 

    handlers: [], 

    start: function() { 
     var self = this; 

     this.interval = setInterval(function() { 
      self.totalSeconds += 1; 

      sec = parseInt(self.totalSeconds % 60) 
      min = Math.floor(self.totalSeconds/60 % 60) 
      hour = Math.floor(self.totalSeconds/3600) 

      $("#hour").text(hour); 
      $("#min").text(min); 
      $("#sec").text(sec); 

      // Fire each expired handlers 
      self.handlers = self.handlers.filter(function(handler) { 

       if (self.totalSeconds >= handler.time) { 
        // Fire the handler then remove it 
        handler.func(); 
        return false; 
       } 

       return true; 
      }) 

     }, 1000); 
    }, 

    pause: function() { 
     clearInterval(this.interval); 
     delete this.interval; 
    }, 

    resume: function() { 
     if (!this.interval) this.start(); 
    }, 

    at: function(time, handler) { 

     // Handle expired handlers 
     if (this.totalSeconds >= time) handler(); 

     // Add the handler to the queue 
     this.handlers.push({ 
      time: time, 
      func: handler, 
     }); 
    } 
}; 

Answer 2

可以傳遞迴調函數maxTime到Clock.start()這將在後面exucted延長給定的時間

var givenTime = 5; 
//maxTime is call back function which is executed after extend giventTime 
Clock.start(maxTime, givenTime); 

function maxTime(){ 
    //do stuff after extend maximum time. 
} 

//here is your call back function is invoked when `givenTime` time is extended 
// inside the `start function` 
//after that every second the call back function is executed. 

if(self.totalSeconds >= givenTime){ 
    callBack(); 
} 

下面是完整的DEMO

如果你想要做一次執行timeup代碼。然後就可以設置codnition內start()功能，如

if(self.totalSeconds == givenTime){ 

DEMO2

UPDATE

在你的情況，請可變giventTime全球除去var和從外面放置maxTime()功能$(document).ready

$(document).ready(function() {...}); 

function maxTime(){ 
     alert('time up'); 
    } 

並與start()功能的相關參數傳遞到resume()功能，如

if (!this.interval) this.start(maxTime, givenTime) 

DEMO3

Answer 3

如果語句應每totalSeconds由setInterval更新時間調用，所以把它放在setInterval函數內。您可以將給定的時間作爲參數傳遞給啓動函數。 updated fiddle

$(document).ready(function() { 
    Clock.start(5); 
    $('#pauseButton').click(function() { Clock.pause(); }); 
    $('#resumeButton').click(function() { Clock.resume(); }); 

}); 

var Clock = { 
    totalSeconds: 0, 

    start: function (maxTime) { 
     var self = this; 

     this.interval = setInterval(function() { 
      self.totalSeconds += 1; 

      sec = parseInt(self.totalSeconds % 60) 
      min = Math.floor(self.totalSeconds/60 % 60) 
      hour = Math.floor(self.totalSeconds/3600) 

      $("#hour").text(hour); 
      $("#min").text(min); 
      $("#sec").text(sec); 

      // Check condition after each increment in Clock.totalSeconds 
      if (Clock.totalSeconds >= maxTime) { 
       Clock.pause(); 
       alert('time is up!'); 
      } 
     }, 1000); 
    }, 

    pause: function() { 
     clearInterval(this.interval); 
     delete this.interval; 
    }, 

    resume: function() { 
     if (!this.interval) this.start(); 
    } 
};