如何使這個時保留選項卡未激活運行？

function timer(time,max) { 
    if(time-1>=0) { 
    --time; 
     $("#timer2").html(Math.ceil(time/100)); 
      pix = Math.round((time/max)*100); 
    document.getElementById('timer').style.width = pix+"%"; 
    setTimeout("timer("+time+","+max+")",10); 
    } 
}

這是JavaScript的。如何使這個時保留選項卡未激活運行？

You have <font style='color: #ff0' id='timer2'><?PHP echo $time; ?></font> seconds left until you can skill again<br> 
<div style='background-color: black; width: 100px;'> 
    <div style='background-color: #ffd700; text-align: center; width: 100%' id='timer'>&nbsp; 
    </div> 
</div> 
<script> 
    timer(<?PHP echo $time*100; ?>,<?PHP echo $time*100; ?>); 
</script>

基本上，時間可以是X秒。計時器每10毫秒運行一次，所以棒看起來很平滑。問題是，當你離開這個標籤時，它停止移動。有沒有辦法治癒這個代碼來做到這一點？

謝謝！

來源

2012-12-11 Alan Bowen

哪個瀏覽器？當選項卡處於非活動狀態時，谷歌瀏覽器每秒限制一個呼叫。 – Zaffy

如果您已經使用jQuery，請jQuery timer插件。

來源

2012-12-11 18:41:05

在現代瀏覽器，超時和間隔節流，當標籤是無效的，所以你的定時器功能僅每秒每秒，而標籤是無效的射擊一次，而不是100次。

要解決這個問題，你需要存儲的時候動畫開始（Date.now()），然後只要您的定時器功能火災，你會檢查當前時間，計算出多少時間，因爲動畫開始已經過去了，然後依據，因爲它開始以來經過的時間量動畫的元素。

實施例（jsfiddle）

timer = function(max) { 
    if (timer.start === undefined) timer.start = Date.now(); 
    if (timer.max === undefined) timer.max = max; 

    var max = timer.max, 
     elapsed = Date.now() - timer.start, 
     left = Math.max(max - elapsed, 0), 
     pctLeft = Math.min(left/max, 1); 

    $('#timer2').html(Math.ceil(left/1000)); 
    $('#timer').css('width', pctLeft * 100 + '%'); 

    if (left > 0) setTimeout(timer, 30); 
    else timer.start = timer.max = undefined; 
} 

timer(5000);

來源

2012-12-11 18:53:05

感謝您的解釋 – freedev

如何使這個時保留選項卡未激活運行？

回答

相關問題