倒數計時器開始計時

我編寫了一個java腳本函數來顯示倒計時。但不知何故，當我啓動這個計時器，它需要3-4秒的延遲，然後在html上顯示計數。有人能告訴我爲什麼這會延遲開始。倒數計時器開始計時

var seconds = 30; 
 
var timer; 
 

 
function myFunction() { 
 
    if (seconds < 30) { 
 
    document.getElementById("countdown").innerHTML = "You are block for " + seconds + " second"; 
 
    } 
 
    if (seconds > 0) { 
 
    seconds--; 
 
    } else { 
 
    clearInterval(timer); 
 
    document.getElementById("countdown").innerHTML = ""; 
 
    } 
 
} 
 
if (!timer) { 
 
    timer = window.setInterval(function() { 
 
    myFunction(); 
 
    }, 1000); 
 
}

<div id="countdown"></div>

來源

2017-08-13 user565

https://developer.mozilla.org/en -US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval 延遲以毫秒（千分之一秒）爲單位的時間，計時器應延遲執行指定函數n或代碼。如果此參數小於10，則使用值10。請注意，實際的延遲可能會更長;有關示例，請參閱WindowOrWorkerGlobalScope.setTimeout（）中的「延遲超過指定時間的原因」。 – tibetty

你應該將塊更改爲阻止 – user7951676

並將<30改爲<= 30 – user7951676

原因有兩個問題：

的setInterval不會立即啓動，您需要在setInterval之前調用一次該函數。
而且，你沒有顯示第30秒，所以你只做了一秒鐘的延遲。

var seconds = 30; 
 
var timer; 
 

 
function myFunction() { 
 
    if (seconds <= 30) { // changed to <= 30 
 
document.getElementById("countdown").innerHTML = "You are block for " + seconds + " second"; 
 
    } 
 
    if (seconds > 0) { 
 
seconds--; 
 
    } else { 
 
clearInterval(timer); 
 
document.getElementById("countdown").innerHTML = ""; 
 
    } 
 
} 
 
if (!timer) { 
 
    myFunction(); // call it once before setInterval 
 
    timer = window.setInterval(function() { 
 
    myFunction(); 
 
    }, 1000); 
 
}

<div id="countdown"></div>

來源

2017-08-13 14:13:15

-3

使用JQuery，

可以使用

只需調用jQuery框架

 $(document).ready(function(){ 
var seconds = 30; 
            var timer; 
            function myFunction() { 
             if (seconds < 30) { 
              document.getElementById("countdown").innerHTML = "You are block for " + seconds + " second"; 
             } 
             if (seconds > 0) { 
              seconds--; 
             } else { 
              clearInterval(timer); 
              document.getElementById("countdown").innerHTML = ""; 
             } 
            } 
            if (!timer) { 
             timer = window.setInterval(function() { 
              myFunction(); 
             }, 1000); 
            } 

    }

希望這一工程

* UP DATE * 你變了，你可以調用函數只有在jQuery函數不是整個代碼

來源

2017-08-13 14:04:11

jquery沒有向解決方案添加任何內容，也不是問題的一部分，或者在標籤中，因此不應該在答案中 – user7951676

其負載首先在頁面上，我沒有看到任何錯誤 –

只是使用window.onLoad – user7951676

試試這個，我也修正了一些拼寫爲你認識我可能搞砸了：

function myFunction() { 
//changed to be <= instead of just < 
if (seconds <= 30) { 
document . getElementById ("countdown"). innerHTML = "You are blocked for " + seconds + " seconds" ; } if (seconds > 0) { 
seconds --; } else { 
clearInterval (timer); 
document . getElementById ("countdown"). innerHTML = "" ; } } if (! timer) { 
timer = window . setInterval (function() { 
myFunction(); }, 1000); 
//call function immediately as well as every second afterwards 
myFunction() }

來源

2017-08-13 14:21:56 user7951676

倒數計時器開始計時

回答

相關問題