清除后启动 setInterval（无限循环）

Question

我正在尝试创建一个无限循环，使变量从 0 递增到最大值 30，并且 min 3 在每次递增之间花费一秒。但取而代之的是它根本不增加，而是开始一遍又一遍地记录检查并且变量 x 和 random 永远不会被重新定义。

var random = Math.floor(Math.random() * 27) + 3;
var x = 0;

setInterval(count, 1000)

function count() {
    if (x < random) {
        x++document.getElementById("secs").innerHTML = x + "s ago";

        console.log(x);
        console.log(random);

    } else {
        var random = Math.floor(Math.random() * 27) + 3;
        var x = 0;
        console.log("check")

    }
};

Answer 1

在 if-statement 之前添加日志语句 console.log(x); 只是为了查看 x 的值是什么...值是否发生变化？你需要在这里有一个地方来更改 x 的值 - 比如 x +=1; 您需要更改计数方法以某种方式增加 X 的值 - 请参阅下面的示例：

function count() {
if (x < random) {
    document.getElementById("secs").innerHTML = x + "s ago";
    //here you increment X
    x += 1;   
    console.log(x);
    console.log(random);
} else {
    //here you are setting new values (no need for var - otherwise you create new, local variables
    random = Math.floor(Math.random() * 27) + 3;
    x = 0;
    console.log("check");
}
};

希望对您有所帮助。

Answer 2

您的代码应该是...

var random = Math.floor(Math.random() * 27) + 3;
var x = 0;

setInterval(function() { x++; count(x,random) }, 1000)

function count(x ,random) {
if (x < random) {

    document.getElementById("secs").innerHTML = x + "s ago";

    console.log(x);
    console.log(random);

} else {
    var random = Math.floor(Math.random() * 27) + 3;
    var x = 0;
    console.log("check")

}
};

记住最好将您的 setInterval 分配给一个变量，这样它就可以被清除...

thisInterval = setInterval(function() { x++; count(x,random) }, 1000)
clearInterval(thisInterval)//<--use this when you want to stop the timer

Answer 3

您创建了两个全局变量来保存 x 和 random 的值，但随后您还在计数函数中创建了两个局部变量。在 javascript 中有一个叫做变量提升的东西，这意味着所有变量声明都被移动到作用域函数的顶部。在您的情况下，这就是您的计数函数在 javascript 运行时的样子：

function count() {
  var random, x;
  // At this point random and x are both undefined, so x < random will always be false

  if (x < random) {
    x++document.getElementById("secs").innerHTML = x + "s ago";

    console.log(x);
    console.log(random);

  } else {
    random = Math.floor(Math.random() * 27) + 3;
    x = 0;
    console.log("check")
  }
};

要解决您的问题，您需要删除计数函数中的 var 关键字

var random = Math.floor(Math.random() * 27) + 3;
var x = 0;

setInterval(count, 1000)

function count() {
  if (x < random) {
    x++;
    document.getElementById("secs").innerHTML = x + "s ago";

    console.log(x);
    console.log(random);
  } else {
    random = Math.floor(Math.random() * 27) + 3;
    x = 0;
    console.log("check")
  }
};

Answer 4

您的代码有几个问题。一个是你在一个你已经在函数外声明的函数内声明变量（在你的 if-else 的 else 部分内），另一个是一旦你调用 window.setInterval()方法你无法阻止它被调用到永恒。

您的目标是增加 x 的值，直到达到 random 的值，然后重新开始。 window.setTimeout() 方法更适合您的目的。考虑以下...

/* generate variable values */
var random = Math.floor(Math.random() * 27) + 3;
var x = 0;
var timer;

/* report the 'random' value */
console.log('random:',random);

function count() {
    if (x < random) {    
        /* report the 'seconds since' value */
        console.log(x+1);

        /* increment the value */
        ++x;

        /* call this function in 1000ms */
        timer = setTimeout(count, 1000);

    } else {
        /* re-generate variable values */
        random = Math.floor(Math.random() * 27) + 3;
        x = 0;

        /* report the new 'random' value */
        console.log(" check");
        console.log('random:',random);

        /* call this function in 1000ms */
        timer = setTimeout(count, 1000);
    }
}

/* begin 1s from now */
timer = setTimeout(count, 1000);

如果出于某种原因，您希望停止对 count() 的下一次调用，您可以将 timer 变量传递给 window.clearTimeout() 方法，就像这样。

/* clear Timeout */
clearTimeout(timer);

另请参阅：WindowTimers @ MDN and this classic Whosebug answer 关于 JavaScript 变量范围。

清除后启动 setInterval（无限循环）

Starting setInterval after clearing it (infinite loop)

javascript

loops

setinterval