Javascript: Verzögerung, die auf html5 Leinwand in einer Schleife zeichnet

Question

Der Code, den ich verwende, erzeugt das Bild einer Baumdatenstruktur. Wenn eine Funktion aufgerufen wird, die dem Baum einen Wert hinzufügt, sucht sie nach dem Knoten, an den der neue Wert angehängt werden soll. Dies geschieht in einer Schleife. Wenn der richtige Knoten gefunden wird, wird der Wert hinzugefügt. Nach jedem Schritt sollte die Funktion den Baum auf dem html5-Canvas mit dem aktuell markierten Knoten (wenn es sich um den Knoten handelt, der den Wert anhängen soll) in einer anderen Farbe als der Rest des Baums zeichnen. Um das Ergebnis zu sehen, sollte zwischen dem Zeichnen eines Schrittes und dem nächsten eine Verzögerung liegen. Wenn ich den Code nur so ausführe, ist das einzige, was du siehst, der letzte Schritt, weil alles zu schnell passiert.

(Um genauer zu sein, die Datenstruktur ist ein Trie-Baum und der Mehrwert ist ein Wort. Jeder Knoten ist ein Buchstabe. Wenn das Wort "Katze" existiert und ich das Wort "Pflege" hinzufügen, sucht der Baum die Wurzel, um das c zu finden, sucht es, um das a zu finden, sucht nach nichts und fügt r nach a hinzu, fügt e dem r hinzu und fügt dem e einen "end-of-word" -Knoten hinzu. Ich glaube nicht, dass ich kann das ohne Schleife für jeden möglichen Baum tun.)

Ich habe keine Idee, wie man die setTimeout() dort setzt. Ich könnte selbst eine Delay-Funktion schreiben, aber dann würde der Browser aufhören zu arbeiten, bis die Verzögerung erreicht ist.

Hat jemand eine Idee, was ich tun könnte? Danke im Voraus.

EDIT: Diese Pseudo-Sache ist, was die Add-Funktion gerade tut. Es ist nicht der eigentliche Code, aber genau wie es funktioniert. Sorry, es ist ein wenig lang ...

Trie add function { 

    get a word via prompt 

    stop if word doesnt consist of only letters /* at least one letter */ 

    working node = trie root /* the node that Im currently checking */ 
    node color = bright color 
    draw the tree 
    node color = normal color 

    for(every letter in word){ 

      if working node has no child nodes{ 
       make new node 
       new node value = current letter 
       new node parent = working node 
       working node children = array consisting of new node 
       working node = new node 
      } 
      else{ /* child nodes exist, search for current letter */ 
       found = false 
       for(every child node of working node){ 
        if(child node value === current letter){ 
         working node = current child node of working node 
         found = true 
         break 
        } 
       } 

       /* if current letter doesnt exist */ 
       if(!found){ 
        make new node 
        new node value = current letter 
        new node parent = working node 
        add new node to array of children of working node 
        working node = new node 
       } 
      } 

      // !!! there should be a delay before this happens !!! 

      working node color = bright color 
      draw the tree 
      working node color = normal color 
    } 

    make new end node 
    end node parent = working node 
    add end node to children of working node 
    working node = end node 

    // !!! there should be a delay before this happens !!! 

    node color = bright color 
    draw the tree 
    node color = normal color 
} 

Answer 1

Statt SetTimeout Sie eine setInterval verwenden können. Es ist wie eine Schleife mit einer Verzögerung zwischen Iterationen.

Zum Beispiel mit einer Verzögerung von 1 Sekunde:

var node_loop = setInterval(function(){ 
    // Draw a node 
}, 1000); 

Um die Schleife zu stoppen:

clearInterval(node_loop); 

Weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval