javascript - 循环内的 DOM 操作发生得太快

Question

尝试以不同的颜色闪烁 div，并在它们之间间隔一段时间(不使用 jquery)。该程序在调试器中运行良好，但运行时所有更改发生得太快，用户看不到任何东西。

尝试使用setTimeout没有效果(可能没有正确使用)

function makeBoard() {
var squareNum = 4
var selected
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
for (let index = 0; index < squareNum; index++) {
    squareDiv = document.createElement('div')
    squareDiv.className = 'square'
    squareDiv.id = '' + (index + 1)
    container.appendChild(squareDiv)
}
selected = document.getElementById('1')
selected.classList.add('selected')
return selected
}

function dimSwitch() {
var turnCnt = 1
var posIndex = 0
var selectedDivs = []
var tempCnt = 0
var tempIndex = 0
var timeNum = getMaxPos()
while (tempCnt < timeNum) {
    var posIndex = posArr.indexOf(turnCnt, tempIndex)
    tempIndex = posIndex + 1
    while (posIndex !== -1) {
        selectedDivs.push(document.getElementById(posIndex + 1 + ''))
        posIndex = posArr.indexOf(turnCnt, tempIndex)
        tempIndex = posIndex + 1
    } 
    selectDiv(selectedDivs) //After this i would like a small delay
    turnCnt++
    tempCnt++
    for (let index = 0; index < selectedDivs.length; index++) {
        selectedDivs[index].classList.remove('selected')
    }
    selectedDivs = []
}
}

function drawMove(currDiv, direction) {
 var nextDiv
 currDiv.classList.remove('selected')
 nextDiv = document.getElementById((parseInt(currDiv.id) + direction))
 nextDiv.classList.add('selected')
 return nextDiv
}

function selectDiv(divs) {
for (let index = 0; index < divs.length; index++) {
    divs[index].classList.add('selected')
}
}
function getMaxPos() {
var maxNum = 0
for (let index = 0; index < posArr.length; index++) {
    if (posArr[index] > maxNum) maxNum = posArr[index]
}
return maxNum
}

var TurnNum = 4 //Number of turns
var posArr = [1]
var turnCnt = 1
var currDiv = makeBoard()

document.onkeydown = function (event) {
switch (event.keyCode) {
    case 37:
        //Left Key -1
        posArr[turnCnt] = posArr[turnCnt - 1] - 1
        currDiv = drawMove(currDiv, -1)
        turnCnt++
        break;

    case 39:
        //Right key +1
        posArr[turnCnt] = posArr[turnCnt - 1] + 1
        currDiv = drawMove(currDiv, 1)
        turnCnt++
        break;

    case 40:
        currDiv.classList.remove('selected')
        dimSwitch()
        break;
}
if (turnCnt === TurnNum) {
    currDiv.classList.remove('selected')
    dimSwitch()
}
};

函数 selectDivs 应该在每次执行之间运行一段时间 每当使用延迟或超时时，它就会卡住或无法正常工作 在我删除 for 循环中的类之前，用户应该能够看到哪些 div 是红色的(“选定的”类)。

JS FIDDLE FULL CODE

这就是我尝试使用 setTimeout 的方法，但其余代码继续在后台运行，我看到的是所有红色的 div:

setTimeout(function(){ 
for (let index = 0; index < selectedDivs.length; index++) { 
       selectedDivs[index].classList.remove('selected') 
   } 
 },1000) 

Answer 1

您已将循环代码放入 setTimeout block 中，因此整个循环一目了然，但会在 1000 毫秒后运行。如果您希望元素逐个出现 1 秒延迟，您可以将逻辑更改为这样，为每个元素设置不同的超时 (1000 * index):

for (let index = 0; index < selectedDivs.length; index++) { 
   setTimeout(function(){ 
        selectedDivs[index].classList.remove('selected') 
    }
    , (1000 * index)
    )
}