SetInterval不在Chrome中刷新HTML

我試圖實現一個腳本，基本上從30秒倒數到0，並在0，重定向到主頁。但是，我注意到我的腳本只適用於Firefox，但不適用於Chrome和Safari。在這些瀏覽器上，計數器在30秒內仍然「卡住」 - 從不刷新HTML，但重定向工作正常。不知道我是否做錯了什麼，或者如果setInterval不是這種事情的正確方法。SetInterval不在Chrome中刷新HTML

<script> 
    var seconds = 31; 
    var counter = setInterval("timer()", 1000); 
    function timer() { 
     seconds = seconds - 1; 
     if (seconds < 0) { 
      setTimeout("location.href='http://www.homepage.com';", 100); 
      return; 
     } 
     updateTimer(); 
    } 

    function updateTimer() { 
     document.getElementById('timer').innerHTML = "Redirecting in " + " " + seconds + " " + "seconds"; 
    } 
    </script>

在此先感謝！編輯：太奇怪了，我的代碼（和你的所有人）正在JSFiddle上工作，但它實際上只是在渲染頁面時「重畫」HTMLinner。秒數正在改變（我輸出到控制檯），更改只是不渲染。

最終編輯：這個問題基本上是由無效的CSS導致的。我相信 - 櫃檯在照片上方運行，我將跨度設置爲具有更高Z指數和頂部和底部元素的相對定位。我不相信這是不可接受的東西是不是一個塊。

來源

2012-10-18 user1496777

的代碼運行我。控制檯中有任何錯誤？ – epascarello

控制檯上沒有錯誤 - 它只是無法正常工作，我認爲這有點奇怪。我想知道它是否與瀏覽器延遲有關。 – user1496777

調用函數onload或文檔就緒而不是初始計時器。 – epascarello

這裏是用更少的定義功能的清潔劑實現（與demo）：

<span id='timer'></span> 
<script> 
var seconds = 31; 
setInterval(function() { 
    seconds = seconds - 1; 
    if (seconds < 0) { 
    setTimeout(function() {document.getElementById('timer').innerHTML = "redirecting..."}, 100); 
    return; 
    } 
    updateTimer(); 
}, 1000); 

function updateTimer() { 
    document.getElementById('timer').innerHTML = "Redirecting in " + + seconds + " seconds"; 
} 
<script>

當然每個JavaScript程序員應該任何機會，指出「EVAL是邪惡的」，其中包括傳遞字符串給setInterval和setTimeout的:)

來源

2012-10-18 17:21:50

這裏的工作示例：

(function() { // wrapper for locals 
 
    var timer = document.getElementById("timer"), 
 
    seconds = 5, 
 
    counter = setInterval(function() { 
 
     if (--seconds < 1) { 
 
     clearInterval(counter); 
 
     timer.innerHTML = "Redirecting now..."; 
 
     setTimeout(function() { 
 
      location.href = 'http://www.homepage.com'; 
 
     }, 500); 
 
     } else { 
 
     timer.innerHTML = timer.innerHTML.replace(/\d+/, seconds); 
 
     } 
 
    }, 1000); 
 
})();

<div id="timer">Redirecting in 5 seconds</div>

來源

2012-10-18 17:24:16 canon

+1的清潔:) –

這是我見過的最好的一個，應該被接受。 – Killah

只是要小心，你不覆蓋window.onload –

的功能更改爲變量，爲我工作：

<script> 
    var seconds = 31; 
    var counter = setInterval(timer, 1000); 
    var timer = function() { 
     seconds = seconds - 1; 
     if (seconds < 0) { 
      setTimeout("location.href='http://www.homepage.com';", 100); 
      return; 
     } 
     updateTimer(); 
    } 

    function updateTimer() { 
     document.getElementById('timer').innerHTML = "Redirecting in " + " " + seconds + " " + "seconds"; 
    } 
    </script>

來源

2013-10-12 11:53:52

SetInterval不在Chrome中刷新HTML

回答

相關問題