Javascript：函數有時起作用，而其他時候什么也沒做

Question

我對此很困惑，但是我敢肯定有一個解釋。 我正在使用一個私人培訓的Web應用程序，並且有一個計時器，每次到達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()函數將不再起作用。 單擊此處查看我制作的演示。 為什么會這樣？ Timer功能有問題嗎？ 非常感謝。

Answer 1

在這里，向setTimeout回調函數中的'running'變量添加簡單的檢查就足夠了。 我認為您可能會對setTimeout和setInterval之間的差異感到有些困惑。

我只是從不需要的“停止”功能中刪除了clearTimeout，並更改了“運行”功能以檢查您的“ 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);
    }
}

Answer 2

原因是變量running仍設置為false，只需在stop函數中關閉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;
}