如何使我的循環與setTimeout一起工作？

Question

changeColor在另一個函數中被調用。 我已經試過了，沒有循環，而且效果很好。 問題是它只會顯示在一個盒子上。 我試圖讓它顯示在每個盒子上，我快要死了。 我已經嘗試過，如果沒有，它不會循環。 我的代碼中缺少什么？ 為什么忽略循環？

function changeColor() {

    var flash = document.querySelector(".side1");

    for (var i = 0; i < flash.length; i++) {
        flash[i].style.backgroundColor = 'green'

            setTimeout(function () {
                flash[i].style.backgroundColor = 'yellow'
            }, 3000);


            setTimeout(function() {
                flash[i].style.backgroundColor = 'red'
            }, 10000);

    } 

}
setInterval(changeColor, 80000000);

Answer 1

document.querySelector僅返回第一個匹配項，而不返回數組。 document.querySelectorAll將返回所有匹配項的數組。

編輯此外，正如@ Drag13指出的那樣，所有超時將使用i的最終值，而不是您初次設置超時時的值。 要解決此問題，可以使用let i = 0而不是var i = 0將i置於塊范圍內，這意味着該塊內的所有代碼（包括setTimeout回調）都將存在當前值。

Answer 2

正如其他人指出的那樣， document.querySelector僅在元素而不是數組上返回。 您也有可變范圍的問題，可以使用let來限制范圍，但這是該語言的相對較新的功能。 如果需要考慮兼容性，那么您可能想要找到另一個解決方案，例如Patrick Evans建議的閉包。 這是功能片段中的示例。 我加快了速度，並修復了Patrick Evans在評論中指出的范圍界定問題。 瓷磚。

 function changeColor() { var flash = document.querySelectorAll("div.flash") for (var i = 0; i < flash.length; i++) { flash[i].className = 'flash green' // create a closure which flashes yellow var flashYellow = (function() { var f = flash[i] return function() { f.className = 'flash yellow' } })() // create a closure which flashes red var flashRed = (function() { var f = flash[i] return function(){ f.className = 'flash red' } })() setTimeout(flashYellow, 1000); setTimeout(flashRed, 2000); } } // change color immediately changeColor(); // change color every three seconds after that setInterval(changeColor, 3000); 

 div.flash { height: 25vh; width: 25vw; } div.green { background-color: green; } div.yellow { background-color: yellow; } div.red { background-color: red; } 

 <div class="flash">text</div> <div class="flash">other text</div>