jQuery - multiple $ (document) .ready ...?

359

Pregunta:

Si enlace en dos archivos JavaScript, ambos con $(document).readyfunciones, ¿qué sucede? ¿Uno sobrescribe al otro? ¿O $(document).readyse llama a ambos ?

Por ejemplo,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});


Estoy seguro de que es una buena práctica combinar ambas llamadas en una sola, $(document).readypero no es posible en mi situación.

javascript jquery rlb.usa
fuente
Posible duplicado de Can you have multiple $ (document) .ready (function () {...}); secciones?
JohnOsborne

Respuestas:

352

¡Todos se ejecutarán y se llamarán por primera vez!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Demo Como puedes ver, no se reemplazan entre sí

También una cosa que me gustaría mencionar

en lugar de esto

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

puedes usar este atajo

jQuery(function(){
   //dom ready codes
});
Praveen Prasad
fuente
66
o incluso más corto $ (function () {// dom ready codes}); api.jquery.com/ready
davehale23
217
Recuerde ver $ (function () {// do stuff}); por primera vez, y lo difícil que fue para Google la explicación? $ (documento). ya se comunica mucho más por tan poco ...
Matt Montag
56
Un voto por un código breve y menos legible es un voto por el terrorismo.
FreeAsInBeer
10
Los atajos no proporcionan ningún beneficio, pero causan ofuscación. Si su objetivo es hacer que su código sea "más corto" en términos de tiempo que toma leer, comprender y mantener, entonces estos atajos lo llevarán por el camino más largo.
jononomo
3
si usar atajos es malo, uno debería usarjQuery(document).ready(function(){ });
Memet Olsen
76

Es importante tener en cuenta que cada jQuery()llamada debe regresar. Si se lanza una excepción en una, las llamadas posteriores (no relacionadas) nunca se ejecutarán.

Esto se aplica independientemente de la sintaxis. Se puede utilizar jQuery(), jQuery(function() {}), $(document).ready(), lo que quiera, el comportamiento es el mismo. Si falla uno de los primeros, los bloques posteriores nunca se ejecutarán.

Esto fue un problema para mí al usar bibliotecas de terceros. Una biblioteca arrojaba una excepción, y las bibliotecas posteriores nunca inicializaron nada.

cjastram
fuente
2
Esta. Acabo de pasar una buena hora reduciendo un problema hasta este punto. Una de mis $(document).readyllamadas arrojó un error y, por lo tanto $(document).ready, nunca se llamó a una función diferente . Me estaba volviendo loco.
Desplazamiento
10
Este ya no es el caso. A partir de jQuery 3.0, jQuery garantiza que se produzca una excepción en un controlador que no impida la ejecución de controladores añadidos posteriormente. api.jquery.com/ready
Ravi Teja
32

$ (documento) .ready (); es lo mismo que cualquier otra función. se dispara una vez que el documento está listo, es decir, cargado. la pregunta es sobre qué sucede cuando se disparan múltiples $ (document) .ready () no cuando se activa la misma función dentro de múltiples $ (document) .ready () 

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

ambos se comportarán exactamente igual. La única diferencia es que, aunque la primera logrará los mismos resultados. este último correrá una fracción de segundo más rápido y requiere menos tipeo. :)

en conclusión, siempre que sea posible, solo use 1 $ (documento) .ready ();

// respuesta anterior

Ambos serán llamados en orden. La mejor práctica sería combinarlos. pero no te preocupes si no es posible. la página no explotará.

Ed Fryed
fuente
^^ editó el mío porque pensé que la gente podría confundirse entre ejecutar la misma función varias veces y ejecutar diferentes funciones en múltiples $ (document) .ready's. ^^ Espero que ayude.
Ed Fryed
21

La ejecución es de arriba hacia abajo. Primero llegado, primero servido.

Si la secuencia de ejecución es importante, combínelos.

Diodeus - James MacFarlane
fuente
10

Ambos recibirán una llamada, por orden de llegada. Echa un vistazo aquí .

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

Salida:

Document-ready 2 fue llamado!

Scoobler
fuente
2

No para necro un hilo, pero bajo la última versión de jQueryla sintaxis sugerida es:

$( handler )

Usando una función anónima, esto se vería así

$(function() { ... insert code here ... });

Ver este enlace:

https://api.jquery.com/ready/

Arlo Guthrie
fuente