2016-12-21 13 views
-1

setIntervalを呼び出す関数を繰り返し呼び出す必要があるという要件があります。私が遭遇した問題は、関数が生成されると(1秒ごとに)、setIntervalを使って設定されます。関数の間でclearIntervalを指定せずにsetIntervalを2回以上呼び出すと、関数自体が呼び出され続けます。 例:setInterval、clearIntervalが機能しない

<!DOCTYPE html> 
<html> 
<body> 

    <p>A script on this page starts this clock:</p> 

    <p id="demo"></p> 
    <button onclick="myStartFunction()">Start time</button> 
    <button onclick="myStopFunction()">Stop time</button> 

<script> 

var myVar; 
function myStartFunction(){ 
    myVar = setInterval(function(){ myTimer() }, 1000); 
} 

function myTimer() { 
var d = new Date(); 
var t = d.toLocaleTimeString(); 
document.getElementById("demo").innerHTML = t; 
} 

function myStopFunction() { 
    console.log(myVar); 
    clearInterval(myVar); 
    console.log(myVar); 
} 
</script> 

</body> 
</html> 

私は機能が停止しない、の間に停止時間をクリックせずに二回開始時刻]ボタンをクリックした場合。これはシナリオの単なる例です。とにかくこれを解決するには?

+2

いや、あなたは最初の停止]をクリックしてユーザーを必要とせずに、開始時間の2番目のインスタンスを起動しないように、あなたのロジックを調整する必要があります。それはコンピュータです。あなたは何をすべきか教えてください – zerohero

答えて

4

あなたのstartFunctionでは、既存の間隔をクリアするだけです。それ以外の場合は、複数の間隔を作成していますが、の最後に間隔の参照を保存するだけです。例えば

function myStartFunction(){ 
    if(myVar) { 
    myStopFunction(); 
    } 
    myVar = setInterval(function(){ myTimer() }, 1000); 
} 
+0

このように働いてくれてありがとう!!私はこれに本当に新しいです... –

0

同じmyVarを何度も上書きしています...つまり、停止機能は最後に開始されたタイマーを停止させるだけです。多くてもsetIntevalを1つだけ実行したい場合は、起動する前にstop関数を呼び出してください。

関連する問題