【javascript】高負荷な計算中にアニメーションを更新する

以前JavaScriptでリバーシを作ったことがあるのですが、そのとき実装に手間取ったことがあるのでメモしておきます。

リバーシAIが8手読みやら10手読みを実行すると、JavaScriptではどうしても10秒前後時間がかかってしまいます。その間に現在AIがどのマスについて先読みしているのかを表示させようとしました。

うまくいく実装

for(const node of childnodes){
    //数秒かかる重たい処理
    const evaluation = node.calcEvalucation();

    //評価値を計算し終えたマスに色を付ける
    document.getElementByID(node.id).style.background = "#00ff00";

    //アニメーションを実行
    await new Promise(resolve=>{
        setTimeout(()=>{}, 0);
    });
}

解説

3段目の「アニメーションを実行」の部分がみそです。

//アニメーションを実行
await new Promise(resolve=>{
    setTimeout(()=>{}, 0);
});

setTimeoutで空の関数を並行処理させると、その間にDOMのアニメーションが実行されるようです。
もちろんawait構文を使っているので、外側の関数がasyncでなければなりません。

うまくいかない実装

念のため、うまく行かない実装も載せておきます。

for(const node of childnodes){
    //数秒かかる重たい処理
    const evaluation = node.calcEvalucation();

    //評価値を計算し終えたマスに色を付ける
    document.getElementByID(node.id).style.background = "#00ff00";
}

そのまま実装すると、アニメーションが更新される前に別のマスについて先読みが開始してしまいます。これではAIがどのマスについて思考中なのかわかりません。アニメーションが更新されるのは全体の処理が実行し終わってからになります。