clearInterval() 函数不起作用，无法弄清楚为什么..？

Question

我试图弄清楚为什么我的 clearInterval() 功能不起作用。多次尝试修复后，在Stack Overflow上求教高手。

此外，当我按下 'stop' 按钮时，它实际上没有像 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>

Answer 1

您需要将 mv 设为全局。否则该变量只是本地变量，并且该值在函数范围之外不可用。

var mv; // global, not const

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

function stopChange() {
    clearInterval(mv);
}

Answer 2

首先你必须在函数外声明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>

clearInterval() 函数不起作用，无法弄清楚为什么..？

clearInterval() function is not working, cannot figure out why..?

javascript

clearinterval