の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を終了させることはないので、3回目のスペースプレスは同時にもう一度setIntervalを開始します。

複数のガイド私が見たところでは、clearInterval(refresh)は間隔を停止する必要がありますが、それは当てはまりません。

これを修正するには何が必要ですか？

出典

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ベースのタイマー

答えて

関連する問題