JQuery進度條在瀏覽器選項卡更改時暫停

我試圖在使用javascript的html頁面上顯示進度條。但是，當包含代碼的瀏覽器選項卡變爲非活動狀態時，進度欄停止更新，將在標籤再次處於活動狀態時恢復。JQuery進度條在瀏覽器選項卡更改時暫停

當窗口處於非活動狀態時，如何防止瀏覽器停止/暫停JavaScript代碼的執行？

雖然它可能是無關緊要的，這裏是代碼：

Object.progressBar = function(){ 
$("#question-progress-bar").progressbar({ 
    value: false, 
    complete: function(event, ui) { ... } 
}); 

var seconds = 15.0, 
progressbar = $("#question-progress-bar"), 
progressbarValue = progressbar.find(".ui-progressbar-value"); 

progressbarValue.css({ 
    "background": '#c5b100', 
    "opacity" : '0.8' 
}) 

var int = setInterval(function() { 
    var percent = (15-seconds)/15*100; 
    seconds=seconds-0.1; 
    progressbar.progressbar("option", { 
     value: Math.ceil(percent) 
    }); 

    $("#question-progress-bar-seconds").html((seconds).toFixed(1)+"s"); 

    if (seconds <= 0.1) { 
     clearInterval(int); 
    } 
}, 100); 
}

來源

2013-04-22 catalaur

[可能相關]（http://stackoverflow.com/questions/7977170/ios-5-pauses-javascript-when-tab-is-not-active），如果不是基本上是重複的。你在看什麼瀏覽器？ – ajp15243 2013-04-22 15:34:13

你不能。當頁面不活動時，現代瀏覽器都會減慢間隔計時器，並且它們無條件地這樣做。 – Pointy 2013-04-22 15:35:03

您是否考慮設置一個時間間隔來檢查頁面加載後的時間？這樣間隔計時器的頻率並不重要。 https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Global_Objects/Date – 2013-04-22 15:36:41

使用setInterval並假設了一定的時間，而不是已經調用（即使它前面之間傳遞，setInterval已漫無精度）使用Date對象獲取條形圖開始的時間，並將其與每次迭代中的當前時間進行比較。

<html> 
    <head> 
     <script> 
      function go() 
      { 
       var pb = new ProgressBar(5, "targ"); 
      } 

      window.onload = go; 

      function ProgressBar(l, t) 
      { 
       var start = Date.now(); 
       var length = l * 1000; 
       var targ = document.getElementById(t); 

       var it = window.setInterval(interval, 10); 

       function interval() 
       { 
        var p = 100 * (Date.now() - start)/length; 

        if(p > 100) 
        { 
         p = 100; 

         window.clearInterval(it); 

         alert("DONE"); // alternatively send an AJAX request here to alert the server 
        } 

        targ.value = (Math.round(p) + "%"); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <input type="text" id="targ" /> 
    </body> 
</html>

我已經做出了表率對象，在這裏，實例化時立即開始倒計時，並呼籲警報並在完成後殺死間隔定時器。或者，可以在完成時完成AJAX調用或任何其他類型的調用。

應該指出的是，如果瀏覽器一起停止使用Javascript，這將不會完成調用。它將，但是，如果足夠的時間過去了，在標籤再次給予焦點時立即完成它。網站無法從腳本方面改變這種瀏覽器行爲。

希望有幫助！

來源

2013-04-22 15:50:04

感謝您的回覆。我正在尋找的是防止瀏覽器停止JavaScript，這是不可能的。 – catalaur 2013-04-22 20:08:51

是的，這是大多數瀏覽器的硬編碼功能。有些會繼續在後臺運行代碼，有些則不會。例如，Chrome會完成此通話; iOS 5.0 Safari不會。儘管這是最接近的，但它至少會盡快執行，而原始解決方案只會從停止的地方繼續執行。 – 2013-04-22 20:51:56

按照您建議的方式實施進度欄後，我注意到瀏覽器在選項卡未聚焦時不會中斷JavaScript代碼。 – catalaur 2013-04-28 17:26:05

JQuery進度條在瀏覽器選項卡更改時暫停

回答

相關問題