tree - Javascript: Delay drawing on html5 canvas in a loop -

the code use generates picture of tree data structure. if function called adds value tree, searches node new value should attached. done in loop. if correct node found, adds value. after every step, function should draw tree on html5 canvas, node checked (if node attach value) in different color rest of tree. see result, there should delay between drawing 1 step , next. if execute code this, thing see last step, because happens fast.

(to more specific, data structure trie tree , added value word. every node letter. if word "cat" exists , add word "care", tree searches root find c, searches find a, searches find nothing , adds r after a, adds e r , adds "end-of-word" node e. don't think can without looping every possible tree.)

i have no idea how put settimeout() in there. write delay function myself, stop browser working until delay done?

does have idea do? in advance.

edit: pseudo thing add function right now. it's not actual code, does. sorry, it's little long...

trie add function {      word via prompt      stop if word doesnt consist of letters /* @ least 1 letter */      working node = trie root /* node im checking */     node color = bright color     draw 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 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 array of children of working node                     working node = new node                 }                }              // !!! there should delay before happens !!!              working node color = bright color             draw tree             working node color = normal color     }      make new end node     end node parent = working node     add end node children of working node     working node = end node      // !!! there should delay before happens !!!      node color = bright color     draw tree     node color = normal color } 

instead of settimeout, can use setinterval. loop delay between iterations.

for example, delay of 1 second:

var node_loop = setinterval(function(){     // draw node }, 1000); 

to stop loop:

clearinterval(node_loop); 

more info: https://developer.mozilla.org/en-us/docs/web/api/windowtimers/setinterval