0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JQuery の ready の実装

Last updated at Posted at 2024-01-03

コメント欄から情報頂きましたのでコメント欄を参照ください

JQuery の ready の実装

DIV でもなんでも ready が実行できて追加要素の描画完了時に実行してくれるのでどういう実装してるのかと思ってソース読んだら setTimeout してた

JQuery 3.7.1 のソース

一部抜粋

if ( document.readyState === "complete" ||
	( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {

	// Handle it asynchronously to allow scripts the opportunity to delay ready
	window.setTimeout( jQuery.ready );

}

動作を推測

  • setTimeout を呼び出す
  • 描画含む他のタスクに処理が一旦切り替わる
  • 描画処理が終わったら処理に戻ってくる
  • 結果として描画終了後に処理を続行することになる
    という一連の流れのおかげで動的に DIV 等を追加した後に ready すると描画後に実行される
    ということっぽい

ready を意識する状況

  • 動的にDIV等の要素追加をした後にすぐにサイズを測ると 0 を返してくる時、ready後だと想定通りのサイズが返ってくる
  • 動的にDIV等の要素追加をした後にスクロールポジションが想定していない値になっている時、ready後だと想定通りのサイズが返ってくる
0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?