Pouvez-vous avoir plusieurs $ (document) .ready (function () {…}); sections?

Si j'ai beaucoup de fonctions au démarrage, doivent-elles toutes être regroupées sous un seul:

$(document).ready(function() {

ou puis-je avoir plusieurs de ces déclarations?

Vous pouvez en avoir plusieurs, mais ce n'est pas toujours la chose la plus intéressante à faire. Essayez de ne pas en abuser, car cela affecterait sérieusement la lisibilité. A part ça, c'est parfaitement légal. Voir ci-dessous:

http://www.learningjquery.com/2006/09/multiple-document-ready

Essayez ceci:

$(document).ready(function() {
    alert('Hello Tom!');
});

$(document).ready(function() {
    alert('Hello Jeff!');
});

$(document).ready(function() {
    alert('Hello Dexter!');
});

Vous constaterez que c'est équivalent à cela, notez l'ordre d'exécution:

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

Il convient également de noter qu'une fonction définie dans un $(document).readybloc ne peut pas être appelée à partir d'un autre $(document).readybloc, je viens de lancer ce test:

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
}); 

la sortie était:

hello1
something
hello2

Vous pouvez en utiliser plusieurs. Mais vous pouvez également utiliser plusieurs fonctions dans un même document.

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});

Oui, vous pouvez facilement avoir plusieurs blocs. Soyez juste prudent avec les dépendances entre eux car l'ordre d'évaluation pourrait ne pas être ce que vous attendez.

Oui, il est possible d'avoir plusieurs appels $ (document) .ready (). Cependant, je ne pense pas que vous puissiez savoir de quelle manière ils seront exécutés. (la source)

Oui c'est possible mais vous pouvez mieux utiliser un div #mydiv et utiliser les deux

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

//and

$("#mydiv").ready(function(){});

Oui, c'est parfait, mais évitez de le faire sans raison. Par exemple, je l'ai utilisé pour déclarer des règles de site globales séparément des pages individuelles lorsque mes fichiers javascript ont été générés dynamiquement, mais si vous continuez à le faire encore et encore, cela sera difficile à lire.

De plus, vous ne pouvez pas accéder à certaines méthodes à partir d'un autre jQuery(function(){});appel, c'est une autre raison pour laquelle vous ne voulez pas faire cela.

Avec l'ancien, window.onloadvous remplacerez l'ancien à chaque fois que vous spécifiez une fonction.

Oui, vous pouvez.

Les sections prêtes pour plusieurs documents sont particulièrement utiles si d'autres modules utilisant la même page l'utilisent. Avec l'ancienne window.onload=funcdéclaration, chaque fois que vous spécifiez une fonction à appeler, elle remplace l'ancienne.

Maintenant, toutes les fonctions spécifiées sont mises en file d'attente / empilées (quelqu'un peut-il confirmer?) Quelle que soit la section de document prêt dans laquelle elles sont spécifiées.

Je pense que la meilleure façon de procéder est de passer à des fonctions nommées (vérifiez ce débordement pour en savoir plus à ce sujet) . De cette façon, vous pouvez les appeler à partir d'un seul événement.

Ainsi:

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

De cette façon, vous pouvez les charger dans une seule fonction prête.

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

});

Cela produira ce qui suit dans votre console.log:

first
second
third

De cette façon, vous pouvez réutiliser les fonctions pour d'autres événements.

jQuery(window).on('resize',function(){
    secondFunction();
});

Vérifiez ce violon pour la version de travail

C'est légal, mais parfois cela provoque un comportement indésirable. À titre d'exemple, j'ai utilisé la bibliothèque MagicSuggest et ajouté deux entrées MagicSuggest dans une page de mon projet et utilisé des fonctions prêtes à séparer les documents pour chaque initialisation des entrées. La toute première initialisation d'entrée a fonctionné, mais pas la seconde et ne donnant également aucune erreur, la deuxième entrée ne s'est pas affichée. Donc, je recommande toujours d'utiliser une fonction Document Ready.

Vous pouvez même imbriquer des fonctions prêtes à documenter dans des fichiers html inclus. Voici un exemple utilisant jquery:

Fichier: test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

Fichier: test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

Sortie console:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

Le navigateur affiche:

test_embed.html

Vous pouvez également le faire de la manière suivante:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
     $("#hide").click(function(){
     $("#test").hide();
     });
     $("#show").click(function(){
     $("#test").show();
     });
 });
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

les réponses précédentes montraient l'utilisation de plusieurs fonctions nommées à l'intérieur d'un seul bloc .ready, ou d'une seule fonction sans nom dans le bloc .ready, avec une autre fonction nommée à l'extérieur du bloc .ready. J'ai trouvé cette question en recherchant s'il y avait un moyen d'avoir plusieurs fonctions sans nom à l'intérieur du bloc .ready - je n'ai pas pu obtenir la syntaxe correcte. J'ai finalement compris et j'espérais qu'en publiant mon code de test, j'aiderais les autres à chercher la réponse à la même question que j'avais