hinzufügen Verzögerung nach jeder Iteration einer for-Schleife

Question

Zuerst möchte ich sagen, dass ich mehrere Antworten zu diesem Themen wie gelesen haben:

JavaScript : For loop with timeout

Delay each iteration of loop by a certain time

und einige andere, aber ich kann einfach Finde nicht heraus, wie genau das funktioniert.

So nach einigen Experimenten ich mit diesen beiden Funktionen am Ende:

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); 
    } 
} 

und dann:

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

Da es nur eine Spaßsache ist, dass ich tue, aber der Code ist viel Ich poste, was ich für diese Frage für relevant halte. Es gibt keinen besonderen Grund, zwei Methoden zu verwenden, da die gesamte Logik in nur einer implementiert werden kann. Die Trennung war Teil meiner Versuche, die Verzögerung hinzuzufügen, die ich möchte.

Derzeit ist die Logik selbst ist schlicht einfach - cells ein Array von Objekten ist, und jedes Objekt bietet eine Möglichkeit, einen einzigartigen DOM unter Verwendung dieses elemten zu wählen:

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

Ich bin nicht sicher, dass Der Code, den ich eingefügt habe, wird klar, aber jedes Mal, wenn ich eine Zelle auswähle und schließlich ihre Hintergrundfarbe ändere, möchte ich eine Art Verzögerung hinzufügen, um die Reihenfolge zu sehen, in der die Zellen gemalt werden.

Answer 1

Wenn Sie wollen einfach für jede Iteration der Schleife Verzögerung hinzuzufügen, nur diese Zeile ändern

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

zu

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

Dadurch wird sichergestellt, dass setTimeout ist in jeder Iteration mit inkrementalen Verzögerungen aufrufen.

Answer 2

Kann eine Funktion wie diese schreiben?

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); 
    } 
} 

Und dann nennen Sie es wie folgt aus:

loopWithDelay(cells, cb, 500); 

wo cb Ihr Code, der in dem Array-Elemente und Index als Argument übernimmt;

Ich habe es nicht getestet, aber Sie bekommen die Idee.