Question

我试图弄清楚为什么我的clearInterval()函数无法正常工作。经过多次尝试修复后，请向Stack Overflow寻求专家的建议。

此外，当我按“停止”按钮时，它实际上会加快速度，而不是起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（）函数无法正常工作，无法弄清楚为什么..？

2 个答案: