Javascript：延迟在html5画布上循环绘制

Question

The code I use generates the picture of a tree data structure. If a function is called which adds a value to the tree, it searches for the node where the new value should be attached. This is done in a loop. If the correct node is found, it adds the value. After every step, the function should draw the tree on the html5 canvas, with the node that is currently checked (if it is the node to attach the value) in a different color than the rest of the tree. To see the result, there should be a delay between drawing one step and the next. If I just execute the code like this, the only thing you see is the last step, because everything happens too fast.

(To be more specific, the data structure is a trie tree and the added value is a word. Every node is a letter. If the word "cat" exists and I add the word "care", the tree searches the root to find the c, searches it to find the a, searches to find nothing and adds r after a, adds e to the r and adds an "end-of-word" node to the e. I don't think I can do this without looping for every possible tree.)

I have no idea how to put the setTimeout() in there. I could write a delay function myself, but then it would stop the browser from working until the delay is done?

Does anyone have an idea what I could do? Thanks in advance.

EDIT: This pseudo thing is what the add function does right now. It's not the actual code, but like exactly what it does. Sorry, it's a little long...

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

Instead of setTimeout, you can use a setInterval. It is like a loop with a delay between iterations.

For example, with a delay of 1 second:

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

To stop the loop:

clearInterval(node_loop);

More info: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval