Question

我在window.onload = function（）{...}之外声明了一个包含setInterval的函数和一个包含clearInterval的函数。但是计时器无法按预期停止

单击开始按钮时，可以看到计时器正确启动，并且控制台中重复打印了“ hello”。但是，当我单击“停止”按钮时，计时器不会清除。

我认为在加载文档时，应准备好“ start_btn”和“ stop_btn”的onclick函数，然后使用开始按钮，它将变量“ timer”设置为数字，然后单击停止按钮，为什么看不到当前非空的“定时器”变量？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      *{
        margin: 0px;
        padding: 0px;
      }
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var timer = null;
        var start_btn = document.getElementById("start");
        var stop_btn = document.getElementById("stop");

        startFunc(start_btn, timer);
        stopFunc(stop_btn, timer);

      };

      function startFunc(target, timer){
        target.onclick = function(){
          timer = setInterval(function(){
            console.log("hello");
          }, 300);
        };
      }

      function stopFunc(target, timer){
        target.onclick = function(){
          clearInterval(timer);
        };
      }

    </script>
  </head>
  <body>
    <button type="button" id="start">start</button>
    <button type="button" id="stop">stop</button>
  </body>
</html>

Answer 1

就像CollinD在评论中说的那样，问题是timer的范围，您可以通过使timer超出范围来使事情起作用

var timer = null;
window.onload = function(){
  var start_btn = document.getElementById("start");
  var stop_btn = document.getElementById("stop");

  startFunc(start_btn);
  stopFunc(stop_btn);

};

function startFunc(target){
  target.onclick = function(){
    timer = setInterval(function(){
      console.log("hello");
    }, 300);
  };
}

function stopFunc(target){
  target.onclick = function(){
    clearInterval(timer);
  };
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      *{
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <button type="button" id="start">start</button>
    <button type="button" id="stop">stop</button>
  </body>
</html>

原因是setInterval返回一个int作为间隔的ID，而不是对象，所以发送的是变量的副本，而不是变量本身

如果您不希望它成为外部范围的一部分，那么您需要向其发送一个object，因为它们是自己发送的，而不是通过副本发送的：

window.onload = function(){
  var timer = {a: null}
  var start_btn = document.getElementById("start");
  var stop_btn = document.getElementById("stop");

  startFunc(start_btn, timer);
  stopFunc(stop_btn, timer);

};

function startFunc(target, timer){
  target.onclick = function(){
    timer.a = setInterval(function(){
      console.log("hello");
    }, 300);
  };
}

function stopFunc(target, timer){
  target.onclick = function(){
    clearInterval(timer.a);
  };
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      *{
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <button type="button" id="start">start</button>
    <button type="button" id="stop">stop</button>
  </body>
</html>

在window.onload外部定义时，Javascript“ clearInterval”方法无法停止计时器

1 个答案: