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

Question

首先，我想说的是，我已经阅读了一些有关此问题的答案，例如：

JavaScript：超时循环

将循环的每次迭代延迟一定时间

和其他一些，但我只是想不通这是如何工作的。

因此，经过一些实验，我最终得到了这两个功能：

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是将数组元素和索引作为参数的代码；

我没有测试过，但是您知道了。