jQuery - multiple $ (document) .déjà…?

Question:

Si j'associe deux fichiers JavaScript, tous deux avec des $(document).readyfonctions, que se passe-t-il? L'un remplace-t-il l'autre? Ou les deux $(document).readysont-ils appelés?

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 qu'il est préférable de simplement combiner les deux appels en un seul, $(document).readymais ce n'est pas tout à fait possible dans ma situation.

Tous seront exécutés et sur la base de la première exécution du premier appel !!

<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 voir, ils ne se remplacent pas

Je voudrais également mentionner une chose

à la place de cela

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

vous pouvez utiliser ce raccourci

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

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

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

C'était un problème pour moi lors de l'utilisation de bibliothèques tierces. Une bibliothèque lançait une exception et les bibliothèques suivantes n'ont jamais rien initialisé.

$ (document) .ready (); est la même que toute autre fonction. il se déclenche une fois le document prêt - c'est-à-dire chargé. la question est de savoir 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. ce dernier fonctionnera une fraction de seconde plus rapidement et nécessitera moins de frappe. :)

en conclusion, si possible, n'utilisez que 1 $ (document) .ready ();

// ancienne réponse

Ils seront tous les 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.

L'exécution est descendante. Premier arrivé premier servi.

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

Les deux seront appelés, premier arrivé, premier servi. Jetez un oeil ici .

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

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

Production:

Document-ready 2 a été appelé!

Pas pour nécro un fil, mais sous la dernière version de jQueryla syntaxe suggérée est:

$( handler )

En utilisant une fonction anonyme, cela ressemblerait à

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

Voir ce lien:

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