JavaScript 長いループ 分割 - hitode909の日記

ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (

[Sixeight]

requestIdleCallback が Safari だと動かなかったりするのでブラウザの足並み揃ってほしい

[Nodaguti]

isInputPending に対する他ベンダーのポジション Webkit: https://www.mail-archive.com/webkit-dev@lists.webkit.org/msg29675.html Mozilla: https://github.com/mozilla/standards-positions/issues/155

[lbtmplz]

どんどんjsしぐさになって…

[nakag0711]

やや煩雑かな

[programmablekinoko]

ググラビティの高いタイトル / そろそろネイティブでスレッドがほしいところだな・・・

[door-s-dev]

全然使い道思いつかないけど、何かに使えそうな気がするのでメモ

[Nyoho]

最近は requestIdleCallback というのがあるとのこと

[ryunosinfx]

Safariちゃんの壁がなぁ・・・・Safariちゃん・・・iOSアプリと競合するのがアカンのか完全にダウングレードされてるよね。

[mas-higa]

［重い処理］

[yarumato]

“Chromium 87以降実装のisInputPending使用感を触ってみると、マウスを動かしたりスクロールしたりするとループが中断されて、JSがなにも仕事してないかのような使用感を得られた。”

[gfx]

InputPending知らなかった。よさそう。

[kamocyc]

へぇー JSで重い処理を書くとき

[raimon49]

タイトルがSEO

[rasterson]

jsならではの技ですね。

[seapig_dolphin]

“for await ”

[tyhe]

ConfigureAwait(false) をください

[kkeisuke]

requestIdleCallback, isInputPending

[mizdra]

async generatorかなり面白くて良かった

[efcl]

重たい処理を`requestIdleCallback`や`navigator.scheduling.isInputPending` で分割して実行する話

[iww]

新しい機能を使うとどんどん長く読みにくくなっていくんだな・・・

[kako-jun]

知らないテクばかりだわ。私は配列のmapでアロー関数を実行してる。アロー関数はPromiseを返すようにすれば、map自体はすぐ抜けてPromiseの配列が手に入りブロックはされない。後は全部resolveされるまで待ち合わせするだけ

[Pasta-K]

navigator.scheduling.isInputPending事例だ