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

Question

我使用的代码生成树数据结构的图片。如果调用向树添加值的函数，它会搜索应附加新值的节点。这是在一个循环中完成的。如果找到正确的节点，则添加该值。在每一步之后，该函数应该在 html5 画布上绘制树，当前检查的节点（如果它是附加值的节点）与树的其余部分颜色不同。要查看结果，绘制一个步骤和下一步之间应该有一个延迟。如果我只是这样执行代码，你看到的只有最后一步，因为一切都发生得太快了。

(更具体地说，数据结构是一个trie树，添加的值是一个单词。每个节点都是一个字母。如果单词“cat”存在并且我添加单词“care”，则树搜索root 找到 c，搜索它以找到 a，搜索什么都找不到，然后在 a 之后添加 r，将 e 添加到 r 并将“词尾”节点添加到 e。我想我不能执行此操作时无需对所有可能的树进行循环。）

我不知道如何将 setTimeout() 放在那里。我可以自己写一个延迟函数，但它会阻止浏览器工作，直到延迟完成？

有人知道我能做什么吗？提前致谢。

编辑：这个伪东西就是 add 函数现在所做的。这不是实际的代码，但就像它所做的一样。抱歉，有点长……

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

您可以使用 setInterval 来代替 setTimeout。这就像一个循环，迭代之间有延迟。

例如延迟1秒：

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

停止循环：

clearInterval(node_loop);

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval