みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
JavaScriptの解説シリーズです。
今回はsetTimeoutに0ミリ秒(引数なし)を渡す意味について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- setTimeoutに0ミリ秒を渡す処理がわかる
setTimeoutに0ミリ秒を渡す
そもそもsetTimeoutとは
setTimeout(関数名, ミリ秒);setTimeoutとは、
指定した時間が経過したあとに一度だけ処理を実行する関数です。
いわゆる遅延実行という処理だよ！
0ミリ秒を渡す意味とは
setTimeout(() => {
// 処理
}, 0);
// 待機時間の初期値は0なので、省略可能
setTimeout(() => {
// 処理
});フロントエンドの開発をやっていると、
このようにsetTimeoutに0ミリ秒を渡している処理を
見かけることがあると思います。
パッと見は意味の無い記述のように見えますが、
この記述をすることでメインスレッドの処理がすべて完了してから実行する
という処理となります。
使い所としては、前処理のDOMの書き換えが終わる前に次のDOM書き換えが走ってしまい
うまく動作しないときなど、明確に前処理の完了を待ちたい場合に使用されます。
ちなみに厳密には4ミリ秒待機するらしいよ！
実際に動かしてみよう！
const greet = (name) => {
console.log("こんにちは、" + name + "だよ！");
};
console.log(1);
setTimeout(() => {
console.log("2");
});
console.log(3);
console.log(3);
console.log(3);
console.log(3);
console.log(3);
greet();
console.log(4);
console.log(4);
console.log(4);
console.log(4);
console.log(4);
console.log(4);
実際に動かしてみると、
一番最後に「2_setTimeout」と出力されているのがわかります。
このことからもメインスレッドの処理の完了を待っていることが確認できました。
ブラウザの仕様とどうしても噛み合わない時に使うものなので乱用はNGだよ！
まとめ
- setTimeout関数とは、遅延実行するために使用される
- 0ミリ秒を指定するとメインスレッドの処理がすべて完了してから実行する
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
