jQuery document.ready vs fonction anonyme d'auto-appel

137

Quelle est la différence entre ces deux.

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

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

Ces deux fonctions sont-elles appelées en même temps? Je sais, document.ready sera déclenché lorsque la page HTML entière sera rendue par le navigateur, mais qu'en est-il de la 2ème fonction (fonction anonyme d'auto-appel). Attend-il que le navigateur termine le rendu de la page ou est-il appelé chaque fois qu'il est rencontré?

javascript jquery Ashit Vora
la source
18
Pour ce que ça vaut, $(function() {});équivaut à$(document).ready(function() {});
Ian Henry
1
La fonction anonyme auto-appelante sera exécutée chaque fois qu'elle est rencontrée. De plus, le rendu du document à l'écran et la création du modèle d'objet en mémoire ne sont pas liés.
Anurag
Related: Pourquoi définir une fonction anonyme et lui passer jQuery comme argument? sur quel motif utiliser avec la colonne vertébrale
Bergi
4
Vous devez vraiment accepter les réponses à vos questions lorsqu'elles y répondent efficacement. Vous avez un taux d'acceptation très faible.
leigero
La manière non-jQuery de faire le premier est: document.addEventListener ('domContentLoaded', function () {...});
Evan Thompson

Réponses:

112

  • $(document).ready(function(){ ... }); ou court $(function(){...});

    Cette fonction est appelée lorsque le DOM is readyce qui signifie, vous pouvez commencer à interroger des éléments par exemple. .ready()utilisera différentes manières sur différents navigateurs pour s'assurer que le DOM EST vraiment prêt.

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

    Ce n’est rien d’autre qu’une fonction qui s’appelle dès que possible lorsque le navigateur interprète votre fichier ecma-/javascript. Par conséquent, il est très peu probable que vous puissiez agir avec succès DOM elementsici.

jAndy
la source
1
@NimChimpsky j'ai confus (function () {}); avec $ (function () {}). Vous êtes le contraire du mal;)
ALH
Je suis confus, en ce qui concerne le (function(){ ... })();code JS ne s'exécute-t-il pas dès que possible? Si vous aviez dit, à l' alert()intérieur du SIAF ou à l'extérieur, l'effet ne serait-il pas le même?
skube
2
@skube Oui, tout code JS s'exécutera dès que l'analyseur le lira, mais votre confusion peut venir de savoir s'il y a un "$" devant le SIAF ou non. Si tel est le cas, et que ce site utilise jQuery, il s'agit de la forme raccourcie de la fonction d'assistance jQuery document.ready, qui planifiera l'exécution de la fonction donnée une fois que le DOM sera disponible. La fonction d'assistance elle-même s'exécutera dès qu'elle sera lue, mais la fonction que vous lui fournissez ne le sera pas.
Neil Monroe
46

(function(){...})(); sera exécuté dès qu'il sera rencontré dans le Javascript.

$(document).ready()sera exécuté une fois le document chargé. $(function(){...});est un raccourci pour $(document).ready()et fait exactement la même chose.

Michal
la source
25

  1. $(document).ready(function() { ... });lie simplement cette fonction à l' readyévénement du document, donc, comme vous l'avez dit, lorsque le document se charge, l'événement se déclenche.

  2. (function($) { ... })(jQuery);est en fait une construction de Javascript, et tout ce que fait ce morceau de code est de passer l' jQueryobjet en function($)tant que paramètre et d'exécuter la fonction, donc à l'intérieur de cette fonction, se $réfère toujours à l' jQueryobjet. Cela peut aider à résoudre les conflits d'espacement de noms, etc.

Donc # 1 est exécuté lorsque le document est chargé, tandis que # 2 est exécuté immédiatement, avec l' jQueryobjet nommé $en raccourci.

Alan Christopher Thomas
la source
25

Le code suivant sera exécuté lorsque le DOM (modèle d'objet de document) est prêt pour l'exécution du code JavaScript.

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

Le raccourci pour le code ci-dessus est:

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

Le code ci-dessous est une fonction JavaScript anonyme auto-appelante, et sera exécutée dès que le navigateur l'interprétera:

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

La fonction auto-appelante jQuery illustrée ci-dessous transmet l'objet jQuery global en tant qu'argument à function($). Cela permet $d'être utilisé localement dans la fonction auto-appelante sans avoir besoin de parcourir la portée globale d'une définition. jQuery n'est pas la seule bibliothèque à utiliser $, ce qui réduit les conflits de noms potentiels.

(function($){
  //some code
})(jQuery);
JSON C11
la source
2
Explication très simple, claire et concise des fermetures javascript.
CODE
16

document.ready exécuté après la "construction" du DOM. Les fonctions auto-appelantes s'exécutent instantanément - si elles sont insérées dans <head>, avant la construction du DOM.

srigi
la source
6
+1 pour contrer un vote défavorable inutile. Cependant, il y a un léger problème dans votre réponse. La fonction auto-appelante s'exécutera partout où elle se trouve lors de l'analyse, et ne doit pas nécessairement être à l'intérieur du <head>, et les règles ne sont pas différentes une fois que le DOM initial a été construit.
Anurag le