javascript - evento - jQuery-multiple $(document).ready…?

jquery document ready

Question

Pregunta:

Si vinculo dos archivos JavaScript, ambos con las funciones $(document).ready , ¿qué sucede? ¿Uno sobreescribe al otro? O bien, ¿ambos $(document).ready son llamados?

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 un solo $(document).ready pero no es posible en mi situación.

Answer 1

$ (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 activan varios $ (documento) .ready () no cuando se ejecuta la misma función dentro de varios $ (documento) .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 se ejecutará una fracción de segundo más rápido y requiere menos escritura. :)

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

// respuesta antigua

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á.

Answer 2

Ambos serán llamados, primero llegado primero servido. Echa un vistazo here .

$(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!

Answer 3

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

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

Esto fue un problema para mí cuando utilizaba bibliotecas de terceros. Una biblioteca estaba lanzando una excepción, y las bibliotecas posteriores nunca inicializaron nada.

Answer 4

La ejecución es de arriba hacia abajo. En primer lugar, primer servido.

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

Answer 5

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

$( handler )

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

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

Vea este enlace:

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

Answer 6

Todos serán ejecutados y On first Called first run !!

<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 pueden ver, no se reemplazan.

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
});