jQuery document.ready vs selbst aufrufende anonyme Funktion

137

Was ist der Unterschied zwischen diesen beiden.

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

  2. (function(){ ... })();

Werden diese beiden Funktionen gleichzeitig aufgerufen? Ich weiß, document.ready wird ausgelöst, wenn die gesamte HTML-Seite vom Browser gerendert wird, aber was ist mit der 2. Funktion (selbstaufrufende anonyme Funktion). Wartet es, bis der Browser das Rendern der Seite abgeschlossen hat, oder wird es aufgerufen, wenn es auftritt?

javascript jquery Ashit Vora
quelle
18
Für das, was es wert ist, $(function() {});ist gleichbedeutend mit$(document).ready(function() {});
Ian Henry
1
Die selbstaufrufende anonyme Funktion wird immer dann ausgeführt, wenn sie auftritt. Das tatsächliche Rendern des Dokuments auf dem Bildschirm und das Erstellen des Objektmodells im Speicher hängen auch nicht zusammen.
Anurag
Verwandte: Warum anonyme Funktion definieren und jQuery als Argument übergeben? auf welchem ​​Muster mit Rückgrat zu verwenden
Bergi
4
Sie sollten wirklich Antworten auf Ihre Fragen akzeptieren, wenn sie diese effektiv beantworten. Sie haben eine sehr niedrige Akzeptanzrate.
Leigero
Die erste Methode ohne jQuery ist: document.addEventListener ('domContentLoaded', function () {...});
Evan Thompson

Antworten:

112

  • $(document).ready(function(){ ... }); oder kurz $(function(){...});

    Diese Funktion wird aufgerufen, wenn DOM is readySie beispielsweise Elemente abfragen können . .ready()verwendet verschiedene Methoden in verschiedenen Browsern, um sicherzustellen, dass das DOM wirklich bereit ist.

  • (function(){ ... })();

    Das ist nichts anderes als eine Funktion, die sich so schnell wie möglich aufruft , wenn der Browser Ihre interpretiert ecma-/javascript. Daher ist es sehr unwahrscheinlich, dass Sie hier erfolgreich handeln können DOM elements.

jAndy
quelle
1
@NimChimpsky Ich habe verwirrt (function () {}); mit $ (function () {}). Du bist das Gegenteil vom Falschen;)
ALH
Ich bin verwirrt, ob (function(){ ... })();JS-Code nicht so schnell wie möglich ausgeführt wird. Wenn Sie gesagt hätten, ein alert()innerhalb oder außerhalb des SIAF, wäre der Effekt nicht der gleiche?
Skube
2
@skube Ja, jeder JS-Code wird ausgeführt, sobald der Parser ihn liest, aber es kann zu Verwirrung kommen, ob sich vor dem SIAF ein "$" befindet oder nicht. Wenn dies der Fall ist und diese Site jQuery verwendet, ist dies die verkürzte Form der Hilfsfunktion jQuery document.ready, mit der die Ausführung der angegebenen Funktion geplant wird, sobald das DOM verfügbar ist. Die Hilfsfunktion selbst wird ausgeführt, sobald sie gelesen wird, die von Ihnen bereitgestellte Funktion jedoch nicht.
Neil Monroe
46

(function(){...})(); wird ausgeführt, sobald es im Javascript vorkommt.

$(document).ready()wird ausgeführt, sobald das Dokument geladen ist. $(function(){...});ist eine Abkürzung für $(document).ready()und macht genau das Gleiche.

Michal
quelle
25

  1. $(document).ready(function() { ... });Bindet diese Funktion einfach an das readyEreignis des Dokuments. Wie Sie bereits sagten, wird das Ereignis beim Laden des Dokuments ausgelöst.

  2. (function($) { ... })(jQuery);ist eigentlich ein Konstrukt von Javascript, und alles, was dieser Code tut, ist, das jQueryObjekt function($)als Parameter zu übergeben und die Funktion auszuführen , sodass er sich innerhalb dieser Funktion $immer auf das jQueryObjekt bezieht . Dies kann helfen, Namespace-Konflikte usw. zu lösen.

# 1 wird also ausgeführt, wenn das Dokument geladen wird, während # 2 sofort ausgeführt wird, wobei das jQueryObjekt $als Kurzform bezeichnet wird.

Alan Christopher Thomas
quelle
25

Der folgende Code wird ausgeführt, wenn das DOM (Document Object Model) für die Ausführung von JavaScript-Code bereit ist.

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

Die kurze Hand für den obigen Code lautet:

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

Der unten gezeigte Code ist eine selbstaufrufende anonyme JavaScript-Funktion und wird ausgeführt, sobald der Browser ihn interpretiert:

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

Die unten gezeigte selbstaufrufende Funktion von jQuery übergibt das globale jQuery-Objekt als Argument an function($). Dies ermöglicht $die lokale Verwendung innerhalb der selbstaufrufenden Funktion, ohne dass der globale Bereich für eine Definition durchlaufen werden muss. jQuery ist nicht die einzige Bibliothek, die davon Gebrauch macht. $Dadurch werden potenzielle Namenskonflikte reduziert.

(function($){
  //some code
})(jQuery);
JSON C11
quelle
2
Sehr einfache, klare und präzise Erklärung von Javascript-Verschlüssen.
CODE
16

document.ready wird ausgeführt, nachdem DOM "erstellt" wurde. Selbstaufrufende Funktionen werden sofort ausgeführt - wenn sie eingefügt werden <head>, bevor DOM erstellt wird.

srigi
quelle
6
+1, um einer unnötigen Ablehnung entgegenzuwirken. Ihre Antwort enthält jedoch ein kleines Problem. Die selbstaufrufende Funktion wird überall dort ausgeführt, wo sie beim Parsen gefunden wird, und muss sich nicht unbedingt innerhalb der befinden <head>. Die Regeln unterscheiden sich nicht, nachdem das ursprüngliche DOM erstellt wurde.
Anurag