選項卡未處於活動狀態時，Javascript setInterval 無法正常工作

Question

function initTimer(timeLeft) {
     var Me = this,
     TotalSeconds = 35,
     Seconds = Math.floor(timeLeft);

     var x = window.setInterval(function() {
         var timer = Seconds;

         if(timer === -1) { clearInterval(x); return; }

            $('#div').html('00:' + (timer < 10 ? '0' + timer : timer));
            Seconds--;

         },1000);
     }

我有這個代碼。 一切正常，當此選項卡在瀏覽器中處於活動狀態時，但是當我更改選項卡並稍后返回選項卡時，它會出現問題。 更准確地說，它錯誤地顯示了時間。

我也試過 setTimeout，但問題是一樣的。

我的一個想法是：HTML5 Web Workers ...

但這里有另一個問題...瀏覽器支持。

有人可以幫助解決這個問題嗎？ 即使選項卡未處於活動狀態，我如何編寫可以正常工作的 setInterval

Answer 1

使用Date對象計算時間。 當您要求時不要依賴計時器觸發（它們不是實時的），因為您唯一的保證是它不會在您要求之前觸發。 它可能會在很晚之后觸發，尤其是對於非活動選項卡。 嘗試這樣的事情：

 function initTimer(periodInSeconds) { var end = Date.now() + periodInSeconds * 1000; var x = window.setInterval(function() { var timeLeft = Math.floor((end - Date.now()) / 1000); if(timeLeft < 0) { clearInterval(x); return; } $('#div').html('00:' + (timeLeft < 10 ? '0' + timeLeft : timeLeft)); },200); } initTimer(10);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div"></div>

請注意，通過更頻繁地檢查它，我們可以確保它永遠不會偏離太多。

Answer 2

JavaScript 計時器不可靠，即使選項卡處於活動狀態。 他們只保證至少你指定的時間已經過去； 不能保證確切的時間量，甚至任何接近它的時間，已經過去了。

為了解決這個問題，每當間隔觸發時，請注意它是什么時間。 您實際上只需要跟蹤兩次：當前時間和前一個間隔觸發的時間。 通過從當前刻度的時間中減去前一個刻度的時間，您可以知道兩者之間實際經過了多少時間，並相應地運行您的計算。

以下是類似內容的基本輪廓：

function  initTimer(timeLeft) {
        var Me           = this,
            TotalSeconds = 35,
            Seconds      = Math.floor(timeLeft),
            CurrentTime  = Date.now(),
            PreviousTime = null;

        var x = window.setInterval(function() {
            var timer = Seconds,
                timePassed;
            PreviousTime = CurrentTime;
            CurrentTime = Date.now();
            timePassed = CurrentTime - PreviousTime;

            if(timer < 0) { clearInterval(x); return; }

            $('#div').html('00:' + (timer < 10 ? '0' + timer : timer));
            Seconds = Seconds - timePassed;

        },1000);
    }