2011-03-10 38 views
305

Pregunta:

Si enlace en dos archivos JavaScript, ambos con $(document).ready funciones, ¿qué ocurre? ¿Uno sobrescribe el otro? ¿O se llama a los dos $(document).ready?

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 la mejor práctica para combinar simplemente tanto llama a un solo $(document).ready pero no es muy posible en mi situación.

Respuesta

293

¡Todo se ejecutará y se ejecutará primero!

<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

también una cosa que me gustaría mencionar

en lugar de esta

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

puede utilizar este acceso directo

jQuery(function(){ 
    //dom ready codes 
}); 
+59

o incluso más corto $ (función() { // dom ready codes }); http://api.jquery.com/ready/ – davehale23

+167

Recuerda ver $ (function() {// do stuff}); por primera vez, y lo difícil que fue para Google la explicación? $ (document) .ready comunica mucho más por tan poco ... –

+12

Estoy de acuerdo con @MattM. Voto por legibilidad cualquier día. – pqsk

18

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

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

30

$ (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 lo que ocurre cuando múltiples $ (document) ready() 's se disparan cuando el fuego no la misma función dentro de múltiples $ (document) ready()' s

//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>'); 

}); 

tanto se comportará exactamente lo mismo. la única diferencia es que, aunque el primero alcanzará los mismos resultados. este último se ejecutará 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();

// vieja respuesta

Serán tanto ser llamado en orden. La mejor práctica sería combinarlos. pero no se preocupe si no es posible. la página no explotará

+0

^^ editado 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 $ (documento) .ready's. ^^ espero que ayude . –

8

Ambos serán llamados, primero que llegue primero se sirve. Eche 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:

Documento-Ready 2 se llamaba!

68

Es importante tener en cuenta que cada llamada jQuery() debe devolver. Si se lanza una excepción en una, las llamadas posteriores (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 falla uno de los primeros, los bloques subsiguientes 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 inicializaban nada.

+0

Esto. Acabo de pasar una buena hora reduciendo un problema hasta este punto. Una de mis llamadas '$ (document) .ready' arrojó un error y, por lo tanto, nunca se llamó a una función diferente' $ (document) .ready'. Me estaba volviendo loco. – scrollup

+3

Esto ya no es el caso. A partir de jQuery 3.0, jQuery garantiza que una excepción que ocurra en un manejador no impida la posterior ejecución de controladores. http://api.jquery.com/ready/ –

Cuestiones relacionadas