jQuery document.ready vs función anónima auto llamada

137

Cuál es la diferencia entre estos dos.

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

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

¿Se llaman ambas funciones al mismo tiempo? Lo sé, document.ready se activará cuando el navegador represente toda la página HTML, pero ¿qué pasa con la segunda función (función de llamada anónima). ¿Espera a que el navegador complete la representación de la página o se llama cada vez que se encuentra?

javascript jquery Ashit Vora
fuente
18
Por lo que vale, $(function() {});es equivalente a$(document).ready(function() {});
Ian Henry
1
La función anónima de auto llamada se ejecutará cada vez que se encuentre. Además, representar el documento en pantalla y crear el modelo de objeto en la memoria no están relacionados.
Anurag
relacionado: ¿Por qué definir una función anónima y pasarla jQuery como argumento? en qué patrón usar con la columna vertebral
Bergi
44
Realmente debería aceptar las respuestas a sus preguntas cuando efectivamente las respondan. Tienes una tasa de aceptación muy baja.
leigero
La forma no jQuery de hacer la primera es: document.addEventListener ('domContentLoaded', function () {...});
Evan Thompson

Respuestas:

112

  • $(document).ready(function(){ ... }); o corto $(function(){...});

    Esta función se llama cuando lo DOM is readyque significa, puede comenzar a consultar elementos, por ejemplo. .ready()usará diferentes formas en diferentes navegadores para asegurarse de que el DOM realmente esté listo.

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

    Eso no es más que una función que se invoca lo antes posible cuando el navegador está interpretando su ecma-/javascript. Por lo tanto, es muy poco probable que pueda actuar con éxito DOM elementsaquí.

jAndy
fuente
1
@NimChimpsky confundí (function () {}); con $ (function () {}). Eres lo opuesto a lo incorrecto;)
ALH
Estoy confundido, con respecto a (function(){ ... })();¿no se ejecuta ningún código JS lo antes posible? Si hubiera alert()dicho , dentro o fuera del SIAF, ¿no sería el mismo efecto?
skube
2
@skube Sí, cualquier código JS se ejecutará tan pronto como el analizador lo lea, pero su confusión puede surgir si hay un "$" delante del SIAF o no. Si es así, y este sitio está utilizando jQuery, entonces esta es la forma abreviada de la función auxiliar jQuery document.ready, que programará la función dada para ejecutarse una vez que el DOM esté disponible. La función auxiliar en sí se ejecutará tan pronto como se lea, pero la función que le proporcione no lo hará.
Neil Monroe
46

(function(){...})(); se ejecutará tan pronto como se encuentre en el Javascript.

$(document).ready()se ejecutará una vez que se cargue el documento. $(function(){...});es un atajo $(document).ready()y hace exactamente lo mismo.

Michal
fuente
25

  1. $(document).ready(function() { ... });simplemente vincula esa función al readyevento del documento, por lo que, como dijiste, cuando el documento se carga, el evento se dispara.

  2. (function($) { ... })(jQuery);en realidad es una construcción de Javascript, y todo lo que hace ese código es pasar el jQueryobjeto function($)como parámetro y ejecuta la función, por lo que dentro de esa función, $siempre se refiere ajQuery objeto. Esto puede ayudar a resolver conflictos de espacios de nombres, etc.

Por lo tanto, el n. ° 1 se ejecuta cuando se carga el documento, mientras que el n. ° 2 se ejecuta inmediatamente, con el jQueryobjeto nombrado $como abreviatura.

Alan Christopher Thomas
fuente
25

El siguiente código se ejecutará cuando el DOM (modelo de objeto de documento) esté listo para que se ejecute el código JavaScript.

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

La mano corta para el código anterior es:

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

El código que se muestra a continuación es una función JavaScript anónima de invocación automática, y se ejecutará tan pronto como el navegador lo interprete:

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

La función de auto-invocación jQuery que se muestra a continuación, pasa el objeto global jQuery como argumento para function($). Esto permite $ser utilizado localmente dentro de la función de auto invocación sin necesidad de atravesar el alcance global para una definición. jQuery no es la única biblioteca que utiliza $, por lo que reduce los posibles conflictos de nombres.

(function($){
  //some code
})(jQuery);
JSON C11
fuente
2
Explicación muy simple, clara y concisa de los cierres de JavaScript.
CÓDIGO
16

document.ready se ejecuta después de que DOM está "construido". Las funciones de invocación automática se ejecutan instantáneamente, si se insertan en <head>, antes de que se construya DOM.

srigi
fuente
66
+1 para contrarrestar un voto negativo innecesario. Sin embargo, hay un pequeño problema en su respuesta. La función de invocación automática se ejecutará donde se encuentre al analizar, y no necesariamente tiene que estar dentro de <head>, y las reglas no son diferentes después de que se haya construido el DOM inicial.
Anurag