Javascript：ループ内のhtml5キャンバスでの描画の遅延

Question

私が使用するコードは、ツリーデータ構造の画像を生成します。ツリーに値を追加する関数が呼び出された場合は、新しい値を追加するノードを検索します。これはループで行われます。正しいノードが見つかった場合は、値を追加します。すべてのステップの後、この関数は、ツリーの残りの部分とは異なる色で、現在チェックされているノード（値を付けるノードである場合）を持つhtml5キャンバスにツリーを描画する必要があります。結果を見るには、1つのステップと次のステップとの間に遅延があるはずです。このようなコードを実行すれば、すべてが速すぎるため、最後に表示されるのは唯一のことです。

（具体的には、データ構造はトライツリーであり、加算される値は単語です。すべてのノードは文字です。「cat」という単語が存在し、「care」という単語を追加すると、ツリーはcを見つけるためのルートは、aを見つけるためにそれを検索し、何も見つからないように検索し、aの後ろにrを追加し、rにeを追加し、eに「単語の終わり」ノードを追加します。可能なすべてのツリーについてループすることなくこれを行うことができます。）

setTimeout（）をそこに配置する方法はわかりません。私は自分で遅延機能を書くことができましたが、遅延が完了するまでブラウザが動作しなくなるでしょうか？

私は何をすることができますか？前もって感謝します。

EDIT：この擬似的なことは、現在add関数が行うことです。実際のコードではありませんが、まさにそのコードと同じです。申し訳ございませんが、ちょっとです...

Answer 1

setTimeoutの代わりにsetIntervalを使用できます。反復の間に遅延を持つループのようなものです。 1秒の遅延で例えば

、：

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

は、ループを停止するには：

clearInterval(node_loop); 

さらに詳しい情報：https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval