Question

首先，我想说我已经阅读了几个关于这个问题的答案，如：

Delay each iteration of loop by a certain time

和其他一些人，但我无法弄清楚这是如何运作的。

经过一些实验后，我最终得到了这两个函数：

function searchForPathWithDelay() {
    var isPathFound = false;
    for (var i = 0; i < cells.length; i = i + 1) {
        if (isThisTheGoalNode(cells[i].axisX, cells[i].axisY)) {
            //the below should be in own method
            var selectedNode = document.querySelector('[data-cellNumber="' + cells[i].id + '"]');
            selectedNode.style.backgroundColor = 'red';
            break;
        }
        setTimeout(searchForPath(cells[i].axisX, cells[i].axisY, cells[i].id), 500);
    }
}

然后：

function searchForPath(axisX, axisY, id) {
    if (isCellInBoundries(axisX, axisY)) {
        var selectedNode = document.querySelector('[data-cellNumber="' + id + '"]');
        selectedNode.style.backgroundColor = 'green';
    }
}

因为我正在做的只是一件有趣的事情，但代码很多，我发布了我认为与这个问题相关的内容。由于所有逻辑只能在一个中实现，因此没有特别的理由可以使用两种方法。分离是我尝试添加我想要的延迟的一部分。

目前逻辑本身很简单 - cells是一个对象数组，每个对象提供了一种方法来选择一个独特的DOM元素：

document.querySelector('[data-cellNumber="' + id + '"]');

我不确定从我粘贴的代码中变得清晰，但简单的想法是，每次我选择一个单元格并最终改变它的背景颜色时，我想添加某种延迟，这样你就可以看到细胞被涂上的序列。

Answer 1

如果您只想为循环的每次迭代添加延迟，只需更改此行

即可

setTimeout(searchForPath(cells[i].axisX, cells[i].axisY, cells[i].id), 500);

到

setTimeout(searchForPath(cells[i].axisX, cells[i].axisY, cells[i].id), 500 * (i+1));

这将确保在每次迭代中调用setTimeout并增加延迟。

Answer 2

可以写一个这样的函数吗？

function loopWithDelay(array, callback, delay, counter){
   if(counter === undefined){
       counter = 0;
   }
   var element = array[counter];
   callback(element, counter);
   counter = counter + 1;
   if(counter < array.length){
      setTimeout(function(){
         loopWithDelay(array, callback, delay, counter);
      }, delay);
   }
}

然后像这样称呼它：

loopWithDelay(cells, cb, 500);

其中cb是将数组元素和索引作为参数接收的代码;

我没有测试过，但你明白了。

在每次迭代for循环后添加延迟

2 个答案: