Question

我正在编写一个脚本，并且有两个布尔语句非常相似但给出了不同的结果，我不明白为什么它们会相互冲突。

我的功能如下：

SCRIPT：

(function() {
    window.onload = function() {
        let stopped = true;
        let button = document.getElementById("start-stop");

        if (stopped) {
           setInterval(function() {
               console.log("The timer is working.");
           }, 1000);
        }

        button.addEventListener('click', function(){
            if (stopped) {
                stopped = false;
                console.log(stopped);
            }  else {
                stopped = true;
                console.log(stopped);
            }
       });
   }
}
}).call(this);

基本思路是，当我按下按钮时setInterval功能停止，但即使if/else功能切换到false，它也会继续运行。

例如，我的console.log看起来像这样：

即。 stopped = false，但setInterval不会终止。

为什么这不能正确评估？

Answer 1

您的代码存在的问题是您正在尝试处理已经开始运行的代码。简单来说，无论stop变量的值是什么，都会每1000ms调用一次setInterval方法。如果您希望真正停止日志，您可以执行以下任何操作：

clearInterval()

完全删除间隔或

       setInterval(function() {
          if (stopped) {
            console.log("The timer is working.");
          }
       }, 1000);

检查已停止变量的值是否已更改（单击后）并相应地执行操作。为您的目的选择其中任何一个..

Answer 2

即使在单击按钮之前，您正在调用setinterval。由于事件已被触发，您无法仅通过将变量设置为false来停止，您需要使用clearinterval清除间隔

检查以下代码段

var intervalId;
window.onload = function() {
  let stopped = true;
  let button = document.getElementById("start-stop");
  var Interval_id;
  button.addEventListener('click', function() {
    if (stopped) {
      Interval_id = callTimeout();

      stopped = false;

    } else {

      clearInterval(Interval_id);
      stopped = true;
    }
  });
}

function callTimeout() {
  intervalId = setInterval(function() {
    console.log("The timer is working.");
  }, 1000);
  return intervalId;
}

<input type="button" id="start-stop" value="click it">

希望有所帮助

Answer 3

将if(stopped)语句放在setInterval函数中，因为如果你使用了这个函数，它会继续运行..

停止setInterval功能的另一种方法是使用clearInterval，就像这样

var intervalId = setInterval(function() { /* code here */}, 1000)
// And whenever you want to stop it
clearInterval(intervalId);

Answer 4

单击按钮时，已停止的变量变为false，但setInterval将不会因为setInterval代码已执行而停止..按钮单击时不会再次执行。如果你重新加载页面，那么当你在第一行写入并且setInterval将再次执行时，已停止的变量将再次设置为true。

现在你可以做的是将setInterval存储在像这样的变量

中

var timer = setInterval(function,1000);

然后当您单击按钮时使用此方法清除间隔

clearInterval(timer);

这应该可以解决问题..希望它有所帮助..

布尔语句未在javascript

4 个答案: