我的JavaScript計時器倒計時太快或沒有啓動的onLoad

我有一個JavaScript計數器：我的JavaScript計時器倒計時太快或沒有啓動的onLoad

var x=100; 
function timerCountdown() 
{ 
    document.getElementById('timer1').value=x; 
    x--; 
    t=setTimeout("timerCountdown()",1000); 

    if (x<-1) 
    { 
     document.getElementById('timer1').value='Done!'; 
     clearTimeout(t); 
    } 
} 

function stopCounter(){ 
clearTimeout(t); 
x=x+1; 
}

然後我用：

<body onFocus='timerCountdown()' onBlur='stopCounter()'>

但問題是，倒計時沒有按」 t在頁面加載時啓動。它等待我點擊另一個窗口並再次重新聚焦窗口。

所以，我想這一點：

<body onLoad='timerCountdown()' onFocus='timerCountdown()' onBlur='stopCounter()'>

但是這一次，倒計時進入非常快。可能是因爲timerCOuntdown每秒調用兩次。

或者，我可以在body標籤中使用onFocus和onBlur，但我需要一個函數來觸發焦點在身體負載上。那可能嗎？

有沒有人有解決這個問題的建議？

非常感謝！

來源

2012-03-06 eric01

什麼'<體的onLoad = 'timerCountdown（）' 的onblur = 'stopCounter（）'>'??爲什麼你有'onFocus ='timerCountdown（）''如果你有負載？ – gideon 2012-03-06 04:31:34

我不知道它在做什麼，'c - '應該會拋出一個錯誤。 – 2012-03-06 04:35:14

嗨，因爲我想定時器恢復，一旦我重新關注定時器的頁面。 – eric01 2012-03-06 04:35:29

答案很簡單，因爲setTimeout被調用兩次，兩次運行timerCountdown()一旦分開，並不斷地調節兩個setTimeout標識。

這將是你想要什麼：

var x = 100; 
var t = 0; 

function timerCountdown() 
{ 
    if (t == 0) t = setInterval(timerCountdown, 1000); 

    document.getElementById('timer1').value=x; 
    x--; 

    if (x < 0) 
    { 
     document.getElementById('timer1').value='Done!'; 
     clearTimeout(t); 
     ticker = 0; 
    } 
} 

function stopCounter() 
{ 
    clearTimeout(t); 
    t = 0; 
    x++; 
}

setInterval是倒計時器更適合的，你需要不斷地運行，因爲setTimeout只運行一次的事情，你需要不斷地調用它。

編輯：這修復了Firefox上定時器的初始快速觸發。

從<body onload=取出處理程序，並將其添加到上述的腳本塊的末尾：

t = setInterval(timerCountdown, 1000);

來源

2012-03-06 05:27:06 Raintree

非常感謝您的回覆。它有效，但有些奇怪的事情發生：在頭兩秒鐘，倒計時速度提高兩倍。我在一秒之內從100到98。不太清楚爲什麼這樣做。你知道它爲什麼這樣做嗎？非常感謝 – eric01 2012-03-06 06:25:50

@ eric01這可能是瀏覽器對事件的處理。使用您現有的代碼，該問題發生在Firefox上，而不是Chrome上。嘗試我在上面編輯的建議更改。請注意，這些計時器本質上是不可靠的，因此取決於瀏覽器在做什麼，它可能會加速或減速。 – Raintree 2012-03-06 06:39:31

非常感謝。我不明白爲什麼，但這已成功。非常感謝， – eric01 2012-03-06 14:32:34

我的JavaScript計時器倒計時太快或沒有啓動的onLoad

回答

相關問題