clearInterval（）関数が機能していません。理由がわかりません。

debugcn 投稿 Dev

Kev

clearInterval()関数が機能しない理由を理解しようとしました。何度も修正を試みた後、StackOverflowで専門家のアドバイスを求めます。

また、として機能する代わりに、clearInterval()「停止」ボタンを押すと実際に速度が上がります。なんで…？

TLDR： ランダムに色が変わる複数の<div>正方形を作成しました。インターバル機能を使用して、色の変化の速度を設定しました。ただし、機能を停止しても機能せず、速度が上がります。

<!DOCTYPE html>
<html>

<head>

  <style>
    .squre {
      display: inline-block;
      width: 30px;
      height: 30px;
      border: 1px black solid;
    }
    
    button:hover {
      cursor: pointer;
    }
  </style>

</head>

<body>

  <div id='wrapper'>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
  </div>

  <button onclick='interval()'>Change Color!</button>
  <button onclick='stopChange()' id='stop'>Stop This!</button>

  <script>
    function interval() {
      const mv = setInterval(colorChange, 100);
    }

    function stopChange() {
      clearInterval(mv);
    }

    function colorChange() {
      var cc = document.getElementsByClassName('squre');
      var ccStop = document.querySelector('#stop');
      var i;

      for (i = 0; i < 10; i++) {
        x = Math.floor(Math.random() * 11);
        if (x == 1) {
          cc[i].style.backgroundColor = 'red';
        } else if (x == 1) {
          cc[i].style.backgroundColor = 'orange';
        } else if (x == 2) {
          cc[i].style.backgroundColor = 'yellow';
        } else if (x == 3) {
          cc[i].style.backgroundColor = 'green';
        } else if (x == 4) {
          cc[i].style.backgroundColor = 'blue';
        } else if (x == 5) {
          cc[i].style.backgroundColor = 'purple';
        } else if (x == 6) {
          cc[i].style.backgroundColor = 'grey';
        } else if (x == 7) {
          cc[i].style.backgroundColor = 'black';
        } else if (x == 8) {
          cc[i].style.backgroundColor = 'green';
        } else if (x == 9) {
          cc[i].style.backgroundColor = 'white';
        } else if (x == 10) {
          cc[i].style.backgroundColor = 'brown';
        } else if (x == 0) {
          cc[i].style.backgroundColor = 'lightblue';
        } else {
          alert('error');
          break;
        }
      }
    }
  </script>
</body>

</html>

Rkv88-カニヤン

まず、関数の外部でmvを宣言して、他の関数がアクセスできるようにする必要があります。これをconstに設定します。 var mv;

<!DOCTYPE html>
<html>

<head>

  <style>
    .squre {
      display: inline-block;
      width: 30px;
      height: 30px;
      border: 1px black solid;
    }
    
    button:hover {
      cursor: pointer;
    }
  </style>

</head>

<body>

  <div id='wrapper'>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
    <div class='squre'></div>
  </div>

  <button onclick='interval()'>Change Color!</button>
  <button onclick='stopChange()' id='stop'>Stop This!</button>

  <script>
    var mv;

    function interval() {
      mv = setInterval(colorChange, 100);
    }

    function stopChange() {
      clearInterval(mv);
    }

    function colorChange() {
      var cc = document.getElementsByClassName('squre');
      var ccStop = document.querySelector('#stop');
      var i;

      for (i = 0; i < 10; i++) {
        x = Math.floor(Math.random() * 11);
        if (x == 1) {
          cc[i].style.backgroundColor = 'red';
        } else if (x == 1) {
          cc[i].style.backgroundColor = 'orange';
        } else if (x == 2) {
          cc[i].style.backgroundColor = 'yellow';
        } else if (x == 3) {
          cc[i].style.backgroundColor = 'green';
        } else if (x == 4) {
          cc[i].style.backgroundColor = 'blue';
        } else if (x == 5) {
          cc[i].style.backgroundColor = 'purple';
        } else if (x == 6) {
          cc[i].style.backgroundColor = 'grey';
        } else if (x == 7) {
          cc[i].style.backgroundColor = 'black';
        } else if (x == 8) {
          cc[i].style.backgroundColor = 'green';
        } else if (x == 9) {
          cc[i].style.backgroundColor = 'white';
        } else if (x == 10) {
          cc[i].style.backgroundColor = 'brown';
        } else if (x == 0) {
          cc[i].style.backgroundColor = 'lightblue';
        } else {
          alert('error');
          break;
        }
      }
    }
  </script>
</body>

</html>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]