Javascriptタイマーが数学ゲームで間違っています

Question

私はJavaScriptで簡単な数学ゲームをやっています。新しい質問の生成を開始するときにタイマをリセットする必要がある瞬間まで、すべてが機能します。この瞬間、非常に奇妙なことが起こります。タイマーは、いくつかの奇妙な負の値または非現実的な正の値を示し始めます。

問題を経験するには、最初に再生ボタンを押して、ゲームを開始します。本当の答えだけを入力してください。何度か試してみると、タイマー付きのものが間違っていることがわかります。以下

全コード：

https://jsfiddle.net/6xq847gf/

https://codepen.io/Atatanas/pen/KyyLgK

function timer(timeleft){ 
    timeleft = 5; 
    timeTime = setInterval(function() { 
     timeleft--; 
     document.getElementById("countdown").textContent = timeleft; 
     if(timeleft <= 0){ 
      clearInterval(timeTime); 
     } 
    },1000) 
} 
function clearTime() { 
    clearInterval(timeTime); 
    timeleft=5; 
    timer(5); 
} 

Answer 1

あなたは）（のsetIntervalの複数のインスタンスを生成しました。そのため、clearInterval（）を実行したときには、直ちにsetIntervalインスタンスだけがクリアされます。しかし、他のインスタンスはまだ実行中です。

1. 削除する必要がある行についてコメントしました。
2. 別のsetInterval（）の前にclearInterval（）を呼び出す必要があります。そこで、load（）の前にclearTime（）を配置します。あなたの関数 `タイマー（）` `timeleftにを置き換えるには

var number1, number2, max = 10, 
 
      sign, numberSigns = 2, 
 
      output, userOutput,points=0,timeleft = 10,timeTime; 
 
\t \t \t 
 
function endGame(){ 
 
hide('points'); 
 
hide('countdown'); 
 
hide('base'); 
 
randomColor(); 
 
} 
 
function timer(timeleft){ 
 
    timeleft=5; 
 
    timeTime = setInterval(function(){ 
 
    timeleft--; 
 
    document.getElementById("countdown").textContent = timeleft; 
 
    if(timeleft <= 0){ 
 
     clearInterval(timeTime); 
 
    } 
 
\t 
 
\t 
 
\t },1000) 
 
\t } 
 
\t function clearTime(){ 
 
\t clearInterval(timeTime); 
 
\t timeleft=5; 
 
\t //timer(5); 
 
\t } 
 
     function check() { 
 
      userOutput = document.getElementById('enterNumber') .value; 
 
      if (userOutput) { 
 
\t \t \t if(userOutput==output){ 
 
       document.getElementById('points').innerHTML=points=points+1; 
 
\t \t \t clearTime(); 
 
       load(); 
 
\t \t \t randomColor(); 
 
\t \t \t 
 
      }else{ 
 
\t \t \t 
 
\t \t \t alert('WRONG'); 
 
     } 
 
\t \t }else{ 
 
\t \t alert('Please enter something.'); 
 
\t \t }} 
 

 
     function load() { 
 
      number1 = Math.round(Math.random() * max); 
 
      number2 = Math.round(Math.random() * max); 
 
      sign = Math.round(Math.random() * numberSigns); 
 
      if (sign == 1) { 
 
       if (number1 < number2) { 
 
        load(); 
 
       } else { 
 
        document.getElementById('outputMath').innerHTML = number1 + "-" + number2; 
 
        output = number1 - number2; 
 
\t \t \t \t \t timer(5); 
 
       } 
 
      } else { 
 
       document.getElementById('outputMath').innerHTML = number1 + "+" + number2; 
 
       output = number1 + number2; 
 
\t \t \t \t timer(5); 
 
      } 
 
     } 
 

 
     function hideStart() { 
 
      document.getElementById("menu").style.display = "none"; 
 
      randomColor(); 
 
      load(); 
 
      show('base'); 
 
\t \t \t show('points'); 
 
\t \t \t show('countdown'); 
 
     } 
 

 
     function hide(id) { 
 
      document.getElementById(id).style.display = "none"; 
 
      randomColor(); 
 
     } 
 

 
     function show(id) { 
 
      document.getElementById(id).style.display = "block"; 
 
     } 
 

 
     function randomColor() { 
 
      var bgcolorlist = new Array("#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50"); 
 
      document.body.style.background = bgcolorlist[Math.floor(Math.random() * bgcolorlist.length)]; 
 
     }

 * { 
 
      margin: 0; 
 
      padding: 0; 
 
      transition: 1s; 
 
      outline: none 
 
     } 
 
     ::selection { 
 
      color: white; 
 
      background-color: black; 
 
     } 
 
     body, 
 
     html { 
 
      margin: 0; 
 
      padding: 0; 
 
      background: linear-gradient(229deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed); 
 
      background-size: 7400% 7400%; 
 
      animation: backgroundGardient 500s ease infinite; 
 
      height: 100%; 
 
      display: grid; 
 
      overflow: auto; 
 
     } 
 
     @-webkit-keyframes backgroundGardient { 
 
      0% { 
 
       background-position: 0% 83% 
 
      } 
 
      50% { 
 
       background-position: 100% 18% 
 
      } 
 
      100% { 
 
       background-position: 0% 83% 
 
      } 
 
     } 
 
     @-moz-keyframes backgroundGardient { 
 
      0% { 
 
       background-position: 0% 83% 
 
      } 
 
      50% { 
 
       background-position: 100% 18% 
 
      } 
 
      100% { 
 
       background-position: 0% 83% 
 
      } 
 
     } 
 
     @-o-keyframes backgroundGardient { 
 
      0% { 
 
       background-position: 0% 83% 
 
      } 
 
      50% { 
 
       background-position: 100% 18% 
 
      } 
 
      100% { 
 
       background-position: 0% 83% 
 
      } 
 
     } 
 
     @keyframes backgroundGardient { 
 
      0% { 
 
       background-position: 0% 83% 
 
      } 
 
      50% { 
 
       background-position: 100% 18% 
 
      } 
 
      100% { 
 
       background-position: 0% 83% 
 
      } 
 
     } 
 
     h1#frontText { 
 
      position: fixed; 
 
      top: 10vh; 
 
      font-size: calc(1vh + 1vw + 3em); 
 
      color: white; 
 
      width: 70vw; 
 
      left: 15vw; 
 
     } 
 
     div#menu { 
 
      border-radius: 10em; 
 
      opacity: 0.8; 
 
      position: absolute; 
 
      top: 50%; 
 
      left: 50%; 
 
      transform: translate(-50%, -50%); 
 
      background-color: #ecf0f1; 
 
      color: black; 
 
      width: 80vw; 
 
      text-align: center; 
 
      vertical-align: middle: 
 
     } 
 
     button#startGame { 
 
      font-size: calc(1vh + 1vw + 3em + 10vmax); 
 
      background-color: #141414; 
 
      color: white; 
 
      border: none; 
 
     } 
 
     @keyframes pulse_animation { 
 
      0% { 
 
       transform: scale(1); 
 
      } 
 
      30% { 
 
       transform: scale(1); 
 
      } 
 
      40% { 
 
       transform: scale(1.08); 
 
      } 
 
      50% { 
 
       transform: scale(1); 
 
      } 
 
      60% { 
 
       transform: scale(1); 
 
      } 
 
      70% { 
 
       transform: scale(1.05); 
 
      } 
 
      80% { 
 
       transform: scale(1); 
 
      } 
 
      100% { 
 
       transform: scale(1); 
 
      } 
 
     } 
 
     button#startGame:hover { 
 
      background-color: #ecf0f1; 
 
      border: none; 
 
      cursor: pointer; 
 
      overflow: hidden; 
 
      outline: none; 
 
      transform: rotate(360deg); 
 
      color: black; 
 
      border-radius: 1em; 
 
      transition: 2s; 
 
      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); 
 
      animation-name: pulse_animation; 
 
      animation-duration: 5000ms; 
 
      transform-origin: 70% 70%; 
 
      animation-iteration-count: infinite; 
 
      animation-timing-function: linear; 
 
     } 
 
     div#menu:hover { 
 
      width: 100vw; 
 
      border-radius: 0; 
 
      opacity: 1; 
 
      transition: 2s; 
 
      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); 
 
      background-color: #141414; 
 
     } 
 
     div#base { 
 
      display: none; 
 
      position: absolute; 
 
      top: 50%; 
 
      left: 50%; 
 
      transform: translate(-50%, -50%); 
 
      background-color: #ecf0f1; 
 
      border: calc(1vh + 1vw) solid #ecf0f1; 
 
      text-align: center; 
 
      vertical-align: middle; 
 
      border-radius: 0.5em; 
 
\t \t \t opacity:0.8; 
 
\t \t \t box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
 
     } 
 
     div#base:hover { 
 
      border-radius: 0.1em; 
 
\t \t \t opacity:1; 
 
\t \t \t box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); 
 
     } 
 
     p#outputMath { 
 
      font-size: calc(2vh + 2vw + 5vmax + 5em); 
 
      text-align: center; 
 
      vertical-align: middle; 
 
     } 
 
     input#enterNumber { 
 
      width: 50vw; 
 
      font-size: calc(1vh + 1vw + 1em + 1vmax); 
 
      border: 2px solid black; 
 
\t \t \t text-align:center; 
 
     } 
 
     input#enterNumber:hover { 
 
      border: 2px solid orange; 
 
     } 
 
     input#enterNumber:focus { 
 
      border: 2px solid red; 
 
     } 
 
     button#submit { 
 
      min-width: 45vw; 
 
      min-height: 10vh; 
 
      background-color: #141414; 
 
      border: none; 
 
      border-radius: 2em; 
 
      font-size: calc(1vh + 1vw + 1em + 1vmax); 
 
      color: white; 
 
     } 
 
     button#submit:hover { 
 
      min-width: 50vw; 
 
      background-color: #2c3e50; 
 
      border-radius: 0.2em; 
 
      color: white; 
 
     } 
 
div#points{ 
 
background-color:#e74c3c; 
 
color:white; 
 
border-bottom-left-radius: 1em; 
 
position:fixed; 
 
top:0vh; 
 
right:0vw; 
 
border:1vw solid #e74c3c; 
 
font-size:calc(1vh + 1vw + 2em); 
 
display:none; 
 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
 
} 
 
\t div#countdown{ 
 
\t background-color:#3498db; 
 
color:white; 
 
border-bottom-right-radius: 1em; 
 
position:fixed; 
 
top:0vh; 
 
left:0vw; 
 
border:1vw solid #3498db; 
 
font-size:calc(1vh + 1vw + 2em); 
 
display:none; 
 
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
 
\t } 
 
div#result{ 
 
position:absolute; 
 
top:0; 
 
left:0; 
 
height:100vh; 
 
width:100vw; 
 
display:none; 
 
}

<!Doctype html> 
 
<html> 
 
<meta charset="utf-8"> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div id='menu'> 
 
     <button onclick='hideStart()' id='startGame'>►</h1> 
 
    </div> 
 
    <div id='base'> 
 
     <p id='outputMath'></p> 
 
     <input id='enterNumber' type='number'> </input> 
 
     </br> 
 
     </br> 
 
     <button onClick='check()' id='submit'>Check</button> 
 
    </div> 
 
    <div id='points'>0</div> 
 
    <div id="countdown"></div> 
 
    <div id='result'></div> 
 
</body> 
 

 
</html>