91818


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

* * *

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

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

[code]

    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;
    }
[/code]

[code]

    <input id="msg" type="text"></input>
[/code]


CC BY-SA 4.0
2022-10-25T11:17:50.063
91812
2022-10-31T01:39:47.237
question
javascript
CPUバインドな処理でプログレス表示を付けたい


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

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

[code]

    <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>
[/code]


CC BY-SA 4.0
2022-10-25T14:33:54.377
91818
2022-10-31T01:39:47.237
2022-10-31T01:39:47.237
54864
22793
91812
answer