無法在for循環中使用setTimeout

Question

我一直在嘗試創建一個JavaScript函數，它快速循環遍歷rgb值的所有24位，並以動態變化的div-background的形式顯示它們

為了減慢進程，看到我正在考慮使用setTimeout方法。 我做了一些關於在循環中使用setTimeout的研究並發現了這一點。

for循環中的setTimeout不會打印連續值

似乎完美地描述了我的問題。 我嘗試使用那里給出的解決方案。 但由於某種原因，它不起作用。

編輯：它現在有效（它使用setInterval，因為這在這里可能更有意義）

 <script> function setColor(i) { var c = i.toString(16); switch(c.length) { case 1: c = "00000" + c; break; case 2: c = "0000" + c; break; case 3: c = "000" + c; break; case 4: c = "00" + c; break; case 5: c = "0" + c; break; default: c; } document.getElementById("colorContainer").style.background = "#" + c; } function loopThroughColors() { var i = 0x000000; setInterval(function(intervalId) { setColor(i); i += 1; if (i >= 0xffffff) { clearInterval(intervalId); } }, 100); } </script> 

Answer 1

您的問題是您無法在調用setTimeout時傳遞參數。

試試這個：

function loopThroughColors() {
    for (var i = 0x000000; i <= 0xffffff; i++) {
        setTimeout(function() {
            setColor(i); 
        }, i); 
    }
}

這樣您就可以為setTimeout提供一個沒有參數的匿名函數，但該函數恰好具有您想要的參數。

正如Bergi所說，當你嘗試將參數i傳遞給setColor ，你實際上只是在評估語句setColor(i) 。 相反，你需要給出一個函數的名稱。

Answer 2

我會采用不同的方法，使用setInterval而不是setTimeout，類似於：

 function setColor(i) { var c = i.toString(16); document.getElementById("colorContainer").style.background = "#" + c; } var i = 0x100; setInterval(function(intervalId) { setColor(i); i += 1; if (i >= 0xfff) { clearInterval(intervalId); } }, 100); 

 #colorContainer { width: 100px; height: 100px; } 

 <div id="colorContainer"></div> 

請注意，setColor中存在一個錯誤 - 它不是在字符串前面加0，因此＃100000之前的所有顏色都無法正常工作。 我只是通過＃100和#fff之間的顏色來欺騙，以表明setInterval可以工作。