的Javascript：功能工作有時，和其他時間只是沒有做任何事情

Question

我真搞不清楚這一點，但我敢肯定有一個解釋。我正在開發一個個人培訓webapp，我有一個計時器，每次到達00:00時，它應該去00:10並停止。使用此功能的定時器作品我寫道：

//timer object function 
 
function Timer(element, callback) { 
 

 
    var ac, minutes, seconds, finalTimeInSeconds, displayMinutes, displaySeconds, interval = 1000, 
 
    self = this, 
 
    timeLeftToNextSecond = 1000, 
 
    running = false; 
 

 
    this.set = function(inputMinutes, inputSeconds) { 
 

 
    finalTimeInSeconds = inputMinutes * 60 + inputSeconds; 
 
    minutes = (Math.floor(finalTimeInSeconds/60)); 
 
    seconds = finalTimeInSeconds % 60; 
 

 
    this.print(); 
 
    } 
 

 
    this.add = function(inputMinutes, inputSeconds) { 
 

 
    finalTimeInSeconds += inputMinutes * 60 + inputSeconds; 
 
    finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds; 
 
    minutes = (Math.floor(finalTimeInSeconds/60)); 
 
    seconds = finalTimeInSeconds % 60; 
 

 
    this.print(); 
 
    } 
 

 
    this.subtract = function(inputMinutes, inputSeconds) { 
 

 
    finalTimeInSeconds -= inputMinutes * 60 + inputSeconds; 
 
    if (finalTimeInSeconds < 0) { 
 
     callback() 
 
    } 
 
    finalTimeInSeconds = (finalTimeInSeconds < 0) ? 0 : finalTimeInSeconds; 
 
    minutes = (Math.floor(finalTimeInSeconds/60)); 
 
    seconds = finalTimeInSeconds % 60; 
 
    this.print(); 
 
    } 
 

 
    this.reset = function() { 
 

 
    this.set(0, 0); 
 
    } 
 

 
    this.print = function() { 
 

 
    displayMinutes = (minutes.toString().length == 1) ? "0" + minutes : minutes; //ternary operator: adds a zero to the beggining 
 
    displaySeconds = (seconds.toString().length == 1) ? "0" + seconds : seconds; //of the number if it has only one caracter. 
 

 
    $(element).text(displayMinutes + ":" + displaySeconds); 
 
    } 
 

 
    this.run = function() { 
 

 
    if (running == false) { 
 
     running = true; 
 

 
     var _f = function() { 
 
     secondStarted = new Date; 
 
     self.subtract(0, 1); 
 
     interval = 1000; 
 

 
     ac = setTimeout(_f, interval); 
 

 

 
     } 
 
     ac = setTimeout(_f, interval); 
 

 

 
    } 
 
    } 
 

 
    this.stop = function() { 
 

 
    if (running == true) { 
 
     running = false; 
 
     console.log(this + "(" + element + ") was stopped"); 
 
     stopped = new Date; 
 
     interval = 1000 - (stopped - secondStarted); 
 
     clearTimeout(ac); 
 
    } 
 
    } 
 

 
    this.getTotalTimeInSeconds = function() { 
 

 

 
    return finalTimeInSeconds; 
 
    } 
 

 
    this.reset(); 
 

 
}

我所做的就是創建這樣一個計時器：

globalTimer = new Timer("#globalTimer", function() { 
      globalTimer.stop(); 
      globalTimer.set(0,10); 
     }); 

然後我將它設置爲00:15並運行它：

globalTimer.set(0,15); 
globalTimer.run(); 

並且對於某些原因，當計時器達到零時，它將設置爲00:10，但不會停止。事情是，在它到達00:00之前，我可以用控制檯停下來，它完美的工作;但是當計時器變爲零時，.stop()函數就不再起作用了。點擊here進行演示。爲什麼會發生？ Timer函數有什麼問題嗎？非常感謝。

Answer 1

原因是變量running仍設置爲false， 只需在關閉停止函數中的if語句後添加以下行。

running = true; 

這裏是代碼提取。

this.stop = function() { 
    if (running == true) { 
     running = false; 
     console.log(this + "(" + element + ") was stopped"); 
     stopped = new Date; 
     interval = 1000 - (stopped - secondStarted); 
     clearTimeout(ac); 
    } 
    running = true; 
} 

Answer 2

在setTimeout回調函數中添加一個簡單的檢查到'running'變量應該就足夠了。我想你可能會對setTimeout和setInterval之間的區別有些困惑。

我只是從你的'stop'函數中刪除了clearTimeout，因爲它不是必需的，並且改變了你的'run'函數來檢查你的'globalTimer'是否'正在運行'並且它按照你所描述的那樣工作。

this.run = function() 
{ 
    var _f = function() { 
     secondStarted = new Date; 
     self.subtract(0, 1); 
     interval = 1000; 

     var theColorIs = $(element).css("color"); 
     if (running == true) 
     { 
      ac = setTimeout(_f, interval); 
     } 
    } 

    if (running == false) 
    { 
     running = true; 
     ac = setTimeout(_f, interval); 
    } 
}