Vous pouvez avoir plusieurs $(document).ready(function(){ ... }); les sections?

Si j'ai beaucoup de fonctions au démarrage ont-ils tous sous un seul:

$(document).ready(function() {

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

  • Nécessaire surtout quand j'ai besoin de charger plusieurs fichiers js, où chacun contient $(document).prêt(); la fonction
  • cette question a été posée sur une interview 😀 Merci
InformationsquelleAutor leora | 2009-08-25
  1. 284

    Vous pouvez avoir plusieurs, mais il n'est pas toujours la chose la plus fantastique à faire. Essayez de ne pas en abuser, comme il va sérieusement affecter la lisibilité. Autre que cela , 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 trouverez qu'il est équivalent à ceci, notez que l'ordre d'exécution:

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

    Il est également intéressant de noter qu'une fonction définie dans un délai d'un $(document).ready bloc ne peut pas être appelé à partir d'un autre $(document).ready bloc, j'ai juste couru ce test:

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

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

    de sortie a été:

    hello1
something
hello2
    • Il n'est pas sage de compter sur l'ordre d'exécution lors de l'utilisation de plusieurs $(document).prêt() consolidés. Chacun a besoin pour s'exécuter indépendamment de tout autre ayant déjà été exécuté ou non.
    • Je ne sais pas comment beaucoup de sens, qui fait que, si elles ne sont pas exécutées dans l'ordre, alors qu'ils sont complètement dénuée de sens dans le contexte de l'application, à l'aide de plusieurs $(document).prêt( blocs serait cassé tout à fait.
    • assurément, ce n' (l'OP est question) est le plus applicable pendant la rédaction d'un complexe peu de code avec plusieurs de démarrage des préoccupations - c'est à dire un bout de code qui est toujours exécuter lorsque le chargement est terminé, et qui est requis uniquement sur certains contenus des nœuds? Dans une telle situation, le contexte devrait être silo d, et l'ordre d'exécution devraient être négligeables - être en mesure d'attribuer à la "DOM ready' événement sans écraser la précédente devient une fonctionnalité utile, quel que soit le comportement de la commande.
    • Belle réponse. J'ai récemment mis à jour mon jQuery UI info-bulles pour les nouvelles versions de jQuery et jQueryUI et constaté que je ne pouvais pas mettre le contenu de l'attribut title est plus du tout comme j'ai eu (avec HTML en elle). J'ai dû le faire en jQuery tooltip() code. J'ai été prise d'une info-bulle sur chaque ligne du tableau en Java boucle, j'ai donc fini par mettre le contenu avec un peu de JS et jQuery prêt à chaque itération ainsi. Il n'est pas assez, mais cela a fonctionné.
    • Concernant une fonction définie dans un prêt bloc n'étant pas appelable à partir d'un autre prêt bloc -- cela est vrai, la façon dont vous définissez la fonction, mais si vous au lieu de la définir comme saySomething = function() {} ensuite, vous pouvez l'appeler. Bizarre, non? jsfiddle.net/f56qsogm faites le test ici.
    • Je pense qu'il se comporte comme cela parce que c'est l'ajout de la fonction de l'objet window qui est accessible dans le monde entier. Sinon, c'est un ensemble de déclarations en fonction de l'étendue localement pour que les prêts de la fonction.

    InformationsquelleAutor karim79
  2. 18

    Vous pouvez utiliser plusieurs. Mais vous pouvez également utiliser plusieurs fonctions à l'intérieur d'un document.prêt ainsi:

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

    //Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});
    • C'est ok si vous avez le plein contrôle du code associé à la page. Si quelqu'un a déjà écrit dans un autre fichier joint à la page, alors vous êtes ok pour le déclarer comme ceci.
    • Pas sûr de ce que vous essayez de dire. Mais si vous le mettez à l'intérieur de votre tête, et de 15 autres JS externe, tout ce qui contient un (ou de plusieurs documents.de charge), il fonctionne toujours comme si il y avait juste un. Intéressant de mentionner est que le scoop de chaque fonction/variable se termine avec la fermeture de parenthèse de l' $(document).prêt-fonction.
    • Juste en train de dire que, parfois, d'autres folk aura écrite modules attachés à la page qui disposent d'un document de prêt de la fonction déjà déclarée, de sorte que vous pourraient ne pas avoir le luxe de déplacer tous vos code dans une fonction (qui, accordé, serait l'idéal). Je voudrais également se méfier de trop de choses ici cependant, comme nous allons obtenir Sur Prêt Ballonnements, ce qui peut rendre le code aussi dur à maintenir.
    • Ah, maintenant, je reçois de vous. Ouais je suis d'accord sur ce point. Juste a déclaré un exemple pour prouver que c'est possible 😉
    InformationsquelleAutor Mickel
  3. 15

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

    InformationsquelleAutor pjesi
  4. 11

    Oui il est possible d'avoir plusieurs $(document).prêt() appelle. Cependant, je ne pense pas que vous pouvez savoir de quelle manière ils seront exécutés. (source)

    • appelés dans l'ordre ajouté
    • Merci, c'est bon de faire ce clair, étant donné que, en dépit de la sagesse générale sur le sujet, le jQuery ready() page n'est pas réellement dire si vous pouvez ou pas (au moment de l'écriture :)). Il n'est toutefois sorte de impliquent c'est OK, si vous lisez entre les lignes d'une phrase: Ready handlers bound this way are executed after any bound by the other three methods above.
    InformationsquelleAutor JW.
  5. 5

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

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

//and

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

    Oui, c'est parfaitement ok.mais évitez de le faire sans une raison. Par exemple, je l'ai utilisé pour déclarer le site de règles séparément individuels que les pages lors de mes fichiers javascript sont générées dynamiquement, mais si vous venez continuer à le faire plus et plus il sera difficile à lire.

    Aussi vous ne pouvez pas accéder à certaines méthodes d'un autre
    jQuery(function(){}); appel
    c'est donc une autre raison, vous ne voulez pas le faire.

    Avec l'ancien window.onload si vous remplacera l'ancien à chaque fois que vous avez spécifié une fonction.

    InformationsquelleAutor Neo
  7. 2

    Oui, vous pouvez.

    Document de plusieurs prêts sections sont particulièrement utiles si vous avez d'autres modules haging sur la même page qui l'utilisent. Avec l'ancien window.onload=func déclaration, à chaque fois que vous avez spécifié une fonction à appeler, il a remplacé l'ancien.

    Maintenant toutes les fonctions indiquées sont mis en file d'attente/empilées (quelqu'un peut confirmer?) indépendamment de document de prêt de la section qu'ils sont spécifiés dans.

    • Oui, c'est vrai, les fonctions sont mises en file d'évaluateurs qu'remplacement) $(document).prêt des fonctions.
    InformationsquelleAutor James Wiseman
  8. 1

    Je pense que la meilleure façon d'y aller est de placer le commutateur de fonctions nommées (Vérifier ce débordement de pour en savoir plus sur ce sujet).
    De cette façon, vous pouvez appeler à partir d'un seul événement.

    Comme suit:

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

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


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

    De cette façon, vous pouvez les charger en un seul prêt de la fonction.

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

    });

    Ce sera la sortie de la suite de votre console.journal:

    first
second
third

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

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

    Cochez cette jouer du violon pour la version de travail

    InformationsquelleAutor Jelle Verzijden
  9. 0

    C'est légal, mais parfois, il cause les comportements indésirables. Comme un Exemple, j'ai utilisé le MagicSuggest de la bibliothèque et a ajouté deux MagicSuggest entrées dans une page de mon projet et utilisé séparée document prêt des fonctions pour chaque initialisation des entrées. La première Entrée d'initialisation travaillé, mais pas la seconde et aussi de ne pas donner la moindre erreur, la Deuxième Entrée ne se présentent pas. Donc, je recommande toujours d'utiliser un Document de Prêt de la Fonction.

    InformationsquelleAutor Nimantha Harshana Perera
  10. 0

    Vous pouvez même nid document prêt des fonctions à l'intérieur inclus des fichiers html. Voici un exemple d'utilisation de 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 de la Console:

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

    Navigateur affiche:

    test_embed.html

    InformationsquelleAutor Tim
  11. 0

    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>

    • Pouvez-vous décrire comment ce différent d'autres réponses?
    • sûr: les réponses précédentes ont montré à l'aide de plusieurs fonctions nommées à l'intérieur d'un seul .prêt bloc, ou une fonction sans nom dans le .prêt à bloc, avec un autre nom de la fonction à l'extérieur de l' .prêt bloc. J'ai trouvé cette question lors de la recherche si il y avait un moyen d'avoir de multiples fonctions sans nom à l'intérieur de l' .prêt bloc - je ne pouvais pas trouver la syntaxe correcte. J'ai finalement pensé à elle et espère qu'en postant mon code de test, je voudrais aider les autres à la recherche de la réponse à la même question que j'ai eu.
    • Désolé, je voulais dire dans la question. Il y a un bouton modifier en bas à gauche de la zone de texte. Décrivant pourquoi votre solution est différente/mieux en fait une bien meilleure réponse que l'avenir lecteur peut comprendre plus rapidement le "Pourquoi". Merci.
    InformationsquelleAutor JEPrice