setTimeout を完璧に理解する

setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん

[kabochatori]

知らんかった…。"大抵のブラウザでは timeoutId は連番なので、 for(let i = 1; i < 65536; i++) { clearTimeout(i); } とかやることでページの全部の setTimeout の発火を止めることが出来ます。"

[ockeghem]

ガハハ>『信じられないかもしれませんが、今から 20 年前は、setTimeout のコールバックを文字列で指定するのが一般的でした』 コールバックを文字列で指定すると脆弱性の原因になることは徳丸本2版に書いてあります

[mizdra]

よかった / ふと調べてみたら、Chrome 108 からは今の5回目から大幅に増やして16回目から setTimeout ネスト時のスロットリングが発生するようにするっぽい: https://chromestatus.com/feature/5710690097561600

[azukiazusa]

へえ “なお whatwg の仕様上、timeoutId は setTimeout と setInterval の間で差がないので、setTimeout で返ってきた timeoutId を clearInterval に渡すことで発火を止めることが出来ますし、その逆も可能です。Node.js でも同様の挙動です。”

[UDONCHAN]

いろいろとハマりどころはあるんだけれども、JSで一番肝要なのは“正確なタイミング計測は諦めるのが一番良い選択肢”

[efcl]

Taskに追加するsetTimeout/setInterva/setImmidiate/postMessage。 MicroTaskに追加するPromise/queueMicrotask/nextTick。 setTimeoutのネストにはスロットリングが実装依存でかかることについて。

[diveintounlimit]

面白い話だけど3日後には忘れちゃってそう

[field_combat]

id連番だったんだ

[razokulover]

へぇー “「ECMAScript に入っていないけれど、ほぼ標準になっている便利な API」の標準化作業が WinterCG によって進められています。”

[gfx]

スロットリングの詳細（仕様・実装）とか全然知らなかった。昔UIイベントのスロットリングをsetTimeoutで実装したことがあったけど、実は想定通りに動いてなかったかもしれない🤔

[xlc]

今回は「setTimeoutは時代遅れ」的なマヌケコメントがなくて何より。

[sukkuuuuu]

“し”

[ryunosinfx]

うほ！うほほ！うほ！うほ！うほほーい！（ドコドコドコドコ！）なおGASがサポートして無くて切れた。

[mayumayu_nimolove]

最初の一行だけ理解してれば事足りる

[Shinwiki]

完璧に理解し、すぐに忘れる

[roshi]

Promise.all内でKeyboardEventのエンターキー操作が効かなかった時setTimeout(0)に逃がして切り抜けたなー。

[yarumato]

“setIntervalとsetTimeoutの使い分け。setIntervalを使いたくなることはまずありません。では繰り返し処理をどう書くかというと、私は以下”

[kako-jun]

シングルスレッドな言語で、1周後のイベントループまで実行を遅らす効果があるって雑な理解で、0を引数にしてReactのコンポーネント内でも使っちゃってる。どう直せば等価になるのか知りたい……