在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是將數組元素和索引作為參數的代碼；

我沒有測試過，但是您知道了。