JavaScriptで評価されていないブールステートメント

Question

私はスクリプトを書いていますが、非常によく似ていますが異なる結果を示すブールステートメントが2つあります。

My機能は次のようになります。

SCRIPT：

(function() { 
    window.onload = function() { 
     let stopped = true; 
     let button = document.getElementById("start-stop"); 

     if (stopped) { 
      setInterval(function() { 
       console.log("The timer is working."); 
      }, 1000); 
     } 

     button.addEventListener('click', function(){ 
      if (stopped) { 
       stopped = false; 
       console.log(stopped); 
      } else { 
       stopped = true; 
       console.log(stopped); 
      } 
     }); 
    } 
} 
}).call(this); 

基本的な考え方は、私はsetInterval機能が停止ボタンを押すと、しかし、それは場合でもif/else機能行くを続けているということですスイッチはfalseに停止しました。

例えば、私にconsole.logは次のようになります。

すなわち、 stopped = falseですが、setIntervalは終了しません。

これは正しく評価されないのはなぜですか？

Answer 1

コードの問題は、すでに動作し始めているコードを処理しようとしていることです。より単純な言葉では、setIntervalメソッドは、停止した変数の値が何であっても、1000msごとに呼び出されます。完全に停止し、変数の値が（後に変更またはされていないかどうかをチェックする間隔や

 setInterval(function() { 
      if (stopped) { 
      console.log("The timer is working."); 
      } 
     }, 1000); 

を削除する

clearInterval() 

：あなたは本当にログを停止したい場合は、これらのいずれかを行うことができますクリック）し、それに従って行動する。あなたはこの機能を使用している場合、それは続けるだろういったんので

Answer 2

がsetInterval関数内if(stopped)文を入れて...あなたの目的のためにこれらのいずれかを選択してください。..

setInterval機能を停止する別の方法は次のように、clearIntervalを使用することですこの

var intervalId = setInterval(function() { /* code here */}, 1000) 
// And whenever you want to stop it 
clearInterval(intervalId); 

Answer 3

ボタンは、変数がfalseになりますが、コードのsetIntervalがすでに実行されているためのsetIntervalが止まらない...それはボタンクリックで再度実行されません停止をクリックします。ページをリロードすると、何が起きるかは、最初の行で書いたように、中止された変数が再びtrueに設定され、setIntervalが再び実行されるということです。

これで、setIntervalをこのような変数

var timer = setInterval(function,1000); 

、その後、あなたは、ボタンはそれがお役に立てば幸いです。..間隔

clearInterval(timer); 

が、これはトリックを行う必要がありますクリアするには、このメソッドを使用する]をクリックします。..

Answer 4

ボタンをクリックする前でもsetintervalを呼び出しています。イベントは、すでにあなたがfalseに変数を設定することにより、単に停止することはできませんトリガされたとして、あなたはてclearInterval

を使用して間隔をクリアする必要があり、次のスニペット

var intervalId; 
 
window.onload = function() { 
 
    let stopped = true; 
 
    let button = document.getElementById("start-stop"); 
 
    var Interval_id; 
 
    button.addEventListener('click', function() { 
 
    if (stopped) { 
 
     Interval_id = callTimeout(); 
 

 
     stopped = false; 
 

 
    } else { 
 

 
     clearInterval(Interval_id); 
 
     stopped = true; 
 
    } 
 
    }); 
 
} 
 

 
function callTimeout() { 
 
    intervalId = setInterval(function() { 
 
    console.log("The timer is working."); 
 
    }, 1000); 
 
    return intervalId; 
 
}

<input type="button" id="start-stop" value="click it">

をチェックすることが

を役に立てば幸い