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

Question

我正在试图创建一个无限循环，使得可变增量从0增加到最大值30和最小值3在每个增量之间花费一秒。但不是这样，它根本不会增加，而是开始记录一遍又一遍，变量x和随机数永远不会被重新定义。

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

您创建了两个全局变量来保存x和随机值，但是你也在你的计数函数中创建了两个局部变量。在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 2

添加日志语句console.log(x);的if-statement之前正好看到什么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 3

你的代码应该是...

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 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和this classic StackOverflow answer关于JavaScript的变量范围。