Site cover image

Site icon imagehtrkwn.dat

Just a htrkwn's personal hobby scrapbook.

Promiseを利用したDOMContentLoadedイベント待機のJavaScriptスニペット

async関数内でDOMContentLoadedイベントが発生してるか、していなかったら発生まで待つという処理がやりたかったんだけど、ここでPromise使えばいけるってのが今日のお勉強。

DOMContentLoadedイベントが発生すると、resolve関数が呼び出されるように設定するこれをawaitでプロミスの解決を待って、DOM解析完了後に行いたい処理に移行させることができる。

(async (d = document) => {

	// DOMContentLoaded イベントが既に発生したかチェック
	if (d.readyState === "loading") {
		// まだ発生していない場合は、イベントが発生するのを待つ
		await new Promise((resolve) => {
			d.addEventListener("DOMContentLoaded", resolve);
		});
	}

// ここから DOMContentLoaded イベント後の処理を実行

})();

非同期処理むずかしい。

参考記事