jQuery document.ready vs自己呼び出し匿名関数

137

これら2つの違いは何ですか。

$(document).ready(function(){ ... });
(function(){ ... })();

これら両方の関数が同時に呼び出されますか？HTMLページ全体がブラウザによってレンダリングされるときにdocument.readyがトリガーされることはわかっていますが、2番目の関数（匿名関数の自己呼び出し）についてはどうでしょうか。ブラウザーがページのレンダリングを完了するのを待つのか、それとも遭遇するたびに呼び出されるのか？

javascript jquery

— アシットヴォラ
ソース

18

それ$(function() {});は価値があるため、に相当します$(document).ready(function() {});

— イアンヘンリー

1

自己呼び出しの無名関数は、検出されるたびに実行されます。また、実際に画面上にドキュメントをレンダリングすることと、メモリにオブジェクトモデルを作成することは無関係です。

— Anurag 2010

関連：なぜ無名関数を定義してjQueryを引数として渡すのですか？バックボーンで使用するパターンに

— Bergi

4

彼らが効果的に答えるとき、あなたは本当にあなたの質問への答えを受け入れるべきです。受け入れ率が非常に低い。

— レイジェロ2017

jQuery以外で最初の方法を実行する方法は、次のとおりです。document.addEventListener（ 'domContentLoaded'、function（）{...}）;

— エヴァン・トンプソン

112

$(document).ready(function(){ ... }); または短い $(function(){...});

この関数は、たとえば、要素のクエリDOM is readyを開始できるときに呼び出されます。異なるブラウザで異なる方法を使用して、DOMが本当に準備ができていることを確認します。.ready()
(function(){ ... })();

これは、ブラウザがを解釈しているときにできるだけ早く自分自身を呼び出す関数に他なりませんecma-/javascript。そのため、DOM elementsここで問題なく対処できる可能性はほとんどありません。

— jAndy
ソース

1

@NimChimpsky混乱しました（function（）{}）; $（function（）{}）を使用します。あなたは間違っているの反対です;）

— ALH

(function(){ ... })();JSコードができるだけ早く実行されないという点で混乱しています。あなたが言ったとしたらalert()、SIAFの内部でも外部でも、効果は同じではないでしょうか？

— skube 2013

2

@skubeはい、パーサーがそれを読み取るとすぐにJSコードが実行されますが、SIAFの前に「$」があるかどうかに混乱が生じている可能性があります。もしそうで、このサイトがjQueryを使用している場合、これはjQuery document.readyヘルパー関数の短縮形であり、DOMが利用可能になると、指定された関数の実行をスケジュールします。ヘルパー関数自体はすぐにそれが読まれるように実行しますが、機能とそれを供給しません。

— Neil Monroe

46

(function(){...})(); JavaScriptで検出されるとすぐに実行されます。

$(document).ready()ドキュメントが読み込まれると実行されます。 $(function(){...});のショートカットで$(document).ready()あり、まったく同じことを行います。

— ミハル
ソース

25

$(document).ready(function() { ... });単にその関数をreadyドキュメントのイベントにバインドするだけなので、ドキュメントが読み込まれると、イベントがトリガーされます。
(function($) { ... })(jQuery);実際にはJavascriptの構成要素であり、そのコードの一部はjQueryオブジェクトをfunction($)パラメーターとして渡して関数を実行するだけなので、その関数内では$常にjQueryオブジェクトを参照します。これは、名前空間の競合などを解決するのに役立ちます。

したがって、＃1はドキュメントのロード時に実行され、＃2はjQueryオブジェクト$が省略形ですぐに実行されます。

— アランクリストファートーマス
ソース

25

次のコードは、DOM（ドキュメントオブジェクトモデル）がJavaScriptコードを実行する準備ができると実行されます。

$(document).ready(function(){
  // Write code here
});

上記のコードの略記は次のとおりです。

$(function(){
  // write code here
});

以下に示すコードは、自己呼び出しの匿名JavaScript関数であり、ブラウザーがそれを解釈するとすぐに実行されます。

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

以下に示すjQuery自己呼び出し関数は、グローバルjQueryオブジェクトを引数としてに渡しますfunction($)。これにより$、定義のグローバルスコープを走査する必要なく、自己呼び出し関数内でローカルに使用できます。jQueryはを使用する唯一のライブラリではない$ため、これにより、潜在的な名前の競合が減少します。

(function($){
  //some code
})(jQuery);

— JSON C11
ソース

2

JavaScriptクロージャの非常にシンプルで明確で簡潔な説明。

— CODE

16

document.readyは、DOMが「構築」された後に実行されます。自己起動関数は即座に実行され<head>ます-DOMが構築される前にに挿入された場合。

— srigi
ソース

6

+1は、不必要な反対投票に対抗します。しかし、あなたの答えには少し問題があります。自己呼び出し関数は、解析時に検出された場所で実行され、必ずしもの内部にある必要はありません<head>。また、最初のDOMが構築された後もルールは変わりません。

— Anurag 2010