0

CPU バインドな for ループがあってそこで進捗表示みたいなのをつけたいです


途中に DOM 操作を挟んでも全部終了するまで表示更新されません

処理を末尾再帰関数に分離して setTimeout とかをはさんで
イベントループの中断をはさめばできると思うんですが
プログラムを大幅にかえないといけなくなるので
for 文のまま挿入するだけでできる画面更新方法って無いでしょうか

const fib = n => n <= 1 ? n : fib(n - 1) + fib(n - 2);

const element = document.getElementById('msg');
for(let i = 1; i <= 40; i++) {
  const msg = `fib(${i}) = ${fib(i)}`;
  console.log(msg);
  element.value = msg;
}
<input id="msg" type="text"></input>

1 件の回答 1

1

async で宣言した非同期関数内で awaitで待つ処理を書けば画面が更新されます。
setTimeoutに目で見て追える様に250ms指定してみました。
実際には、Promise.resolveなどを返す関数の実行を待つことになります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/async_function

<input id="msg" type="text"></input>
<script type="text/javascript">
  const fib = n => n <= 1 ? n : fib(n - 1) + fib(n - 2);

  (async() => {
    const element = document.getElementById('msg');
    for (let i = 1; i <= 40; i++) {
      const msg = `fib(${i}) = ${fib(i)}`;
      console.log(msg);
      element.value = msg;
      await new Promise(s => setTimeout(s, 250));
    }
  })();
</script>

この質問に回答するには、ログインする必要があります。