Javascript。コードが実行されなくなるのを防ぐためのボタン

Question

私はこれを初めて勉強しているので少し面白い反応ゲームを作っています。それは非常に大きな課題ですから、ボタンを押すとスクリプトが実行されなくなるスタートがクリックされたときにすべてを開始することはできましたが、実行を停止することはできません。 これを実現させる方法は誰にでもありますか？ここに私のコードは、これまでのところです：

ここに私のHTMLです：

 <button id="start">Start</button> 

     <button id="stop">Stop</button> 

     <button id="reset">Reset</button> 

     <p>Your reaction time: <u><span id="timeTaken"></span></u></p> 

     <p>Your average reaction time: <u><span id="average"></span></u></p> 

     <p>Your best reaction time: <u><span id="best"></span></u></p> 

     <div id="shape"></div> 

そして、ここでは私のjavascriptです：

 var start = new Date().getTime(); 

     function getRandomColor() {  //generates random color 

      var letters = 'ABCDEF'.split(''); 

      var color = '#'; 

      for (var i = 0; i < 6; i++) { 

       color += letters[Math.floor(Math.random() * 16)]; 

      } 

      return color; 

     } 

     function makeShapeAppear() {  //makes that shape appear on screen 

      var top = Math.random() * 400; 

      var left = Math.random() * 400; 

      var width = (Math.random() * 200) + 100; 

      if (Math.random() > 0.5) { 

       document.getElementById("shape").style.borderRadius = "50%" 

      } else { 

       document.getElementById("shape").style.borderRadius = "0"; 

      } 

      document.getElementById("shape").style.backgroundColor = getRandomColor(); 

      document.getElementById("shape").style.top = top + "px"; 

      document.getElementById("shape").style.left = left + "px"; 

      document.getElementById("shape").style.width = width + "px"; 

      document.getElementById("shape").style.height = width + "px"; 

      document.getElementById("shape").style.display = "block"; 

      start = new Date().getTime(); 

     } 

     function appearAfterDelay() { //makes that shape appear after some delay 

      setTimeout(makeShapeAppear, Math.random() * 3000); 

     } 

     document.getElementById("reset").onclick = function() { //reset button, so when you click it, everything resets 

      location.reload(); 

     } 

     var totaltime = 0; 

     var totalgames = 0; 

     document.getElementById("start").onclick = function() { //start button, so when you click it, shapes start appearing and time's running 

      appearAfterDelay(); 

      document.getElementById("shape").onclick = function() { 

       document.getElementById("shape").style.display = "none"; 

       var end = new Date().getTime(); 

       var timeTaken = (end - start)/1000; 

       totaltime += timeTaken; 

       totalgames += 1; 

       var notroundaverage = (totaltime/totalgames); 

       var roundaverage = notroundaverage.toFixed(3); 

       document.getElementById("timeTaken").innerHTML = timeTaken + " s"; 

       document.getElementById("average").innerHTML = roundaverage + " s"; 

       appearAfterDelay(); 

      } 

     } 

Answer 1

JavaScriptがイベントベースで、そしてあなたが本当にそれを 'STOP' を試みるべきではありません。あなたのコードを見ると、あなたが本当にやりたいことは、あなたのボタンがクリックされた時のタイムアウトをクリアしていることが分かります。単に追加し、あなたのコードの上部に

var timeOutId;

、そしてその後

timeOutId = setTimeout(makeShapeAppear, Math.random() * 3000);

へ

setTimeout(makeShapeAppear, Math.random() * 3000);

を変更する：これは、この行を配置することによって達成することができますこのlinを使用して達成できるタイムアウトをクリアするclickイベントのボタンe：window.clearTimeout(timeOutId);