在清除它之後啓動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的變量範圍。