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

Question

Question :

Si je lie deux fichiers JavaScript, les deux avec $(document).ready fonctions, que se passe-t-il ? Est-ce que l'une écrase l'autre ? Ou est-ce que les deux $(document).ready être appelé ?

Par exemple,

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

Je suis sûr que la meilleure pratique consiste à combiner les deux appels en un seul $(document).ready mais ce n'est pas tout à fait possible dans ma situation.

Answer 1

Tous seront exécutés. et sur la base du premier appelé, premier exécuté !!

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

Démo Comme vous pouvez le constater, ils ne se remplacent pas l'un l'autre.

Il y a aussi une chose que je voudrais mentionner

à la place de ce

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

vous pouvez utiliser ce raccourci

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

Answer 2

Il est important de noter que chaque jQuery() doit effectivement retourner. Si une exception est levée lors d'un appel, les appels suivants (sans rapport) ne seront jamais exécutés.

Cela s'applique quelle que soit la syntaxe. Vous pouvez utiliser jQuery() , jQuery(function() {}) , $(document).ready() comme vous voulez, le comportement est le même. Si un premier bloc échoue, les blocs suivants ne seront jamais exécutés.

C'était un problème pour moi lorsque j'utilisais des bibliothèques tierces. Une bibliothèque lançait une exception, et les bibliothèques suivantes n'initialisaient jamais rien.

Answer 3

$(document).ready() ; est la même chose que n'importe quelle autre fonction. Elle se déclenche une fois que le document est prêt, c'est-à-dire chargé. La question porte sur ce qui se passe lorsque plusieurs $(document).ready() sont déclenchés, et non lorsque vous déclenchez la même fonction dans plusieurs $(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>');

});

les deux se comporteront exactement de la même manière. la seule différence est que, bien que le premier obtiendra les mêmes résultats, le second sera plus rapide d'une fraction de seconde et nécessitera moins de saisie :)

en conclusion, dans la mesure du possible, n'utilisez que 1 $(document).ready() ;

//ancienne réponse

Ils seront tous deux appelés dans l'ordre. La meilleure pratique serait de les combiner. Mais ne vous inquiétez pas si ce n'est pas possible, la page n'explosera pas.

Answer 4

L'exécution se fait de haut en bas. Premier arrivé, premier servi.

Si la séquence d'exécution est importante, combinez-les.

Answer 5

Les deux seront appelés, premier arrivé, premier servi. Jetez un coup d'œil aquí .

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

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

Sortie :

Document-ready 2 a été appelé !