暫停和播放按鈕上的setInterval（）點擊

我正在JavaScript中製作一個計時器，並且在啓動和停止計時器時遇到了一些麻煩，而無法在計時器再次啓動時跳過它。我已經放入一個布爾（isPaused）來暫停和播放setInterval，但是當我播放定時器跳過任何時間長度時已經暫停。我試着回想起setInterval函數，並試着重置決定倒計時時間的變量（timeLeft）。當我暫停播放它時，timeLeft變量是相同的，所以我不確定它爲什麼會這樣跳。暫停和播放按鈕上的setInterval（）點擊

我的HTML：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6"> 
     <button id="start-button">Start Timer</button> 
     <button id="pause-button">Pause Timer</button> 
     <button id="play-button">Play Timer</button> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-6"> 
     <span id="display-minutes"></span> 
     <span id="display-seconds"></span> 
     <span id="display-milli"></span> 
    </div> 
    </div> 
</div>

和我的JavaScript：

var minutes = 25; 
var seconds = 0; 
var milliseconds = 0; 

var endTime = 0; 
var timeLeft = 0; 
var dateAtPause = 0; 
var isPaused = false; 

$('#display-minutes').html(minutes); 
$('#display-seconds').html(seconds); 
$('#display-milli').html(milliseconds); 

//calculate time remaining between now and endTime 
function timeRemaining() { 
    timeLeft = Date.parse(endTime) - Date.parse(newDate()); 
    var milliseconds = Math.floor(timeLeft % 1000); 
    var seconds = Math.floor((timeLeft/1000) % 60); 
    var minutes = Math.floor(timeLeft/1000/60); 
    var total = timeLeft; 
    return { 
    'milliseconds': milliseconds, 
    'seconds': seconds, 
    'minutes': minutes, 
    'total': total, 
    }; 
} 

function updateClock() { 
    if (!isPaused) { 
    var time = timeRemaining(); 
    $('#display-minutes').html(time.minutes); 
    $('#display-seconds').html(time.seconds); 
    $('#display-milli').html(time.milliseconds); 
    if (time.total <= 0) { 
     clearInterval(timeInterval); 
    }; 
    }; 
}; 

$('#start-button').click(function() { 
    //set time (var minutes) minutes from now 
    var startTime = new Date(); 
    endTime = new Date(startTime.setMinutes(startTime.getMinutes() + minutes)); 

    updateClock(); 
    var timeInterval = setInterval(updateClock, 1000); 

}); 

$('#pause-button').click(function() { 
    isPaused = true; 
    dateAtPause = new Date(); 
    console.log(timeLeft); 
}); 

$('#play-button').click(function() { 
    isPaused = false; 
    var timeInterval = setInterval(updateClock, 1000); 
    console.log(timeLeft); 
});

來源

2016-01-29 Davez01d

發生這種情況是因爲您選擇使用結束時間的時間點並且失去了所需的原始持續時間。

從概念上講，您需要跟蹤剩餘的毫秒數而不是實際的結束時間。

功能，我建議：

timer = {}; 
timer.duration = 10000; //one field to track the expected duration (milliseconds is easiest to deal with) 
timer.elapsedTime = 0; //another field to track what time has elapsed

而只是跟蹤的經過時間與你期望它的運行時間。

我創建了一個的jsfiddle給你看的功能：JSFiddle

來源

2016-01-29 22:54:03 n8isjack

謝謝！我把你的概念和運行，讓一切變得更簡單，謝謝！ – Davez01d

如果暫停/播放上一計時器不被清除，結束時間不會改變。這就是爲什麼剩餘時間即使在暫停期間也會繼續下降的原因。

打後，你有一個更多的計時器，所以你不斷增加運行計時器的數量。

此外，updateClock中的clearInterval對在其他函數中本地創建的timeInterval變量沒有任何作用。

來源

2016-01-29 21:22:07 Ilya

謝謝你的提示！我需要爲setInterval聲明一個全局變量，所以我可以從其他函數中調用clearInterval，就像你說的，我只是每次創建新的定時器而沒有結束其他函數。 – Davez01d

暫停和播放按鈕上的setInterval（）點擊

回答

相關問題