的setInterval基於定時器

我試圖創建一個類似於上qqtimer.net 的一個定時器的行爲如下定時器：在頁面加載的setInterval基於定時器

定時器顯示0。
空間被按下時，計時器開始向上計數。
再次按下空格時，計時器停止並顯示時間。
在空間被再次按下，復位定時器並啓動，

等等等等。從我的研究中，似乎最好的方法是使用setInterval和document.onkeypress。這裏是我到目前爲止的代碼：

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="main.js"> 
    </script> 
    </head> 
    <body> 
    <div id="timer"> 
     0 
    </div> 
    </body> 
</html>

main.js

var running = false; 
document.onkeypress = function(e) { 
    if (e.keyCode === 0 || e.keyCode === 32) { 
    if (running) { 
     clearInterval(refresh); 
    } else { 
     var startTime = new Date().getTime(); 
     var refresh = window.setInterval(function() { 
     document.getElementById('timer').innerHTML = new Date().getTime() - startTime; 
     }, 100); 
    } 
    } 
};

此代碼工作正常定時器啓動，但停止它似乎並沒有工作。它永遠不會結束原來的setInterval，所以第三個空間新聞同時啓動另一個setInterval。

我看過的多個導遊說0123'應該停止這個間隔，但這似乎不是真的。

我需要改變以解決這個問題？

來源

2016-07-27 Julian Lachniet

在您的事件處理程序之外移動刷新 –

主要原因是您在if語句中聲明瞭刷新內容，所以在您嘗試清除它時它不可用。看看下面這個工作示例。

var running = false; 
var refresh; 
document.onkeypress = function(e) { 
    if (e.keyCode === 0 || e.keyCode === 32) { 
    if (running) { 
     clearInterval(refresh); 
     running = false; 
    } else { 
     var startTime = new Date().getTime(); 
     refresh = setInterval(function() { 
     document.getElementById('timer').innerHTML = new Date().getTime() - startTime; 
     }, 100); 
     running = true; 
    } 
    } 
};

來源

2016-07-27 00:25:42

這工作正常。謝謝！ –

@JulianLachniet請務必批准他的回答，以便得到信用 – MayorMonty

的setInterval基於定時器

回答

相關問題