Comment combiner plusieurs fonctions jquery

Question

Si vous visualisez le code jquery ci-dessous, vous verrez le fameux $ (document) .ready (function() { qui démarre le script.) Je le vois sur presque tous les exemples de code jquery sur le net et je veux savoir, si je cours 5 fonctions de code différentes dans un seul fichier dois-je utiliser $ (document) .ready (function() { au début de tous les?

Sinon comment pourrais-je combiner par exemple le code ci-dessous dans une page 3 fois, prétendre qu'il est 3 codes différents?

<script type="text/javascript" > 
$(document).ready(function(){ 
    setTimeout(function(){ 
    $(".flash").fadeOut("slow", function() { 
    $(".flash").remove(); 
     }); }, 2000); 
}); 
</script> 

Answer 1

Vous devriez essayer de ne pas mettre trop de choses à l'intérieur des blocs doc ready. Oui, vous pouvez en avoir des multiples, mais je m'en tiens à l'un d'entre eux. Vous pouvez également placer votre script juste avant la balise de fermeture du corps sans avoir besoin de document prêt.

Je conseille de casser le code en fonctions séparées. De cette façon, vous pouvez les réutiliser tout au long de votre page à différentes étapes. Ensuite, utilisez simplement le bloc doc ready pour déclencher un appel à la fonction init de cette page.

Vous pouvez également utiliser $(function(){}); comme shorcut à $(document).ready(function(){});

<script type="text/javascript" > 
$(function(){ 
    init(); 
}); 

function init(){ 
    someFunction(); 
    //other init stuff 
} 

function someFunction(){ 
    setTimeout(function(){ 
    $(".flash").fadeOut("slow", function() { 
    $(".flash").remove(); 
    }); }, 2000); 

} 
</script> 

Answer 2

non vous n'avez pas besoin, il suffit de le mettre en un seul, et déclencher toutes les fonctions à partir de là;

<script type="text/javascript" > 
$(document).ready(function(){ 
     func1(); 
     func2(); 
     ... 
}); 
</script> 

Answer 3

Tout d'abord, vous pouvez raccourcir ce à:

<script type="text/javascript" > 
    jQuery(function() { 
     ... 
    }); 
</script> 

Deuxièmement, si vous voulez que vos scripts pour exécuter lorsque la page est terminé le chargement, alors oui, vous devez les mettre dans une jQuery/document.ready() fonction. Vous pouvez les mettre tous dans le même bloc jQuery(function() { }) et ils seront exécutés dans l'ordre, vous n'avez pas besoin de les séparer.

Pour développer le fonctionnement des blocs function() {}:

jQuery(/* do something */); 

signifie "Sur chargement de la page, faire quelque chose". Ce "faire quelque chose" est une fonction. Vous pouvez passer directement une fonction comme ceci:

function myFunction() { 
    ... 
} 

jQuery(myFunction); 

Vous avez défini une fonction « myFunction » et dit jQuery pour exécuter la charge de page. Notez que vous venez de passer la fonction elle-même à jQuery, sans (). Si vous écrivez jQuery(myFunction()); à la place, cela exécutera myFunction() immédiatement, et tout ce qui est retourné par myFunction() sera placé dans jQuery(), et cela sera exécuté lors du chargement de la page. C'est un peu différent des langages comme PHP, puisque en PHP c'est le comportement souhaité pour tout exécuter immédiatement, en Javascript ce n'est pas forcément le cas. En PHP, vous ne pouvez pas passer la fonction elle-même, en Javascript vous pouvez. Les fonctions en Javascript agissent beaucoup plus comme des variables.

ce que vous faites habituellement est « faire une fonction à la volée » qui contient un certain bloc de code que vous voulez exécuter au plus tard:

jQuery(function() { 
    foo(); 
    bar(); 
}); 

Dans ce cas, vous passez une fonction eh bien, juste que vous l'avez fait à la volée et la fonction n'a pas de nom. jQuery conservera cette fonction jusqu'au chargement de la page, moment auquel il l'exécutera. À l'intérieur de cette fonction, vous pouvez faire autant de choses que vous le souhaitez.

Answer 4

Le problème est que vous ne comprenez pas ce qu'est l'événement prêt et pourquoi vous en avez besoin. Imaginez qu'une page ne soit pas encore complètement chargée et que vous essayiez de changer quelque chose avec du javascript et que le code de cet élément HTML que vous essayez de manipuler n'est même pas encore chargé, les choses vont mal.

L'événement ready résout ce problème. N'importe quelle fonction (le plus souvent une seule anonymous function) que vous liez à l'événement ready est exécuté dès que tous les elements in the document sont prêts à être traversés et manipulés. Il est considéré comme une mauvaise pratique d'avoir un javascript en ligne. Si vous souhaitez qu'un événement (clic, survol, etc.) fonctionne sur votre page, vous devez l'appeler dans la fonction $ (document) .ready(). Et comme une page n'est chargée qu'une seule fois, toute fonction liée à l'événement ready ne sera appelée qu'une seule fois. Donc il n'y a pas beaucoup de sens dans la liaison plusieurs fonctions à l'événement prêt. Vous pouvez tout faire dans cette fonction que vous y attachez. Cependant, cela ne causera aucun dommage (tant que vous comprenez ce que vous faites) puisque chaque fonction que vous avez liée à l'événement ready sera appelée une fois que le DOM sera prêt. Je ne comprends pas ce que vous essayez d'accomplir en exécutant ce même code cinq fois ... donc je ne peux pas vous aider avec ça. J'espère que cette explication vous aidera à résoudre votre problème actuel.

Answer 5

Je pense que l'affiche originale demandait s'il doit le faire:

<script> 
$(document).ready(function(){ 
     func1(); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
     func2(); 
}); 
</script> 

Ou s'il peut juste faire:

<script> 
$(document).ready(function(){ 
     func1(); 
     func2(); 
}); 
</script> 

Dans l'exemple plus tard, il y a un scénario et un document prêt déclaration. Beaucoup plus propre. Je crois que la réponse est oui, vous pouvez le faire plus tard sans aucun problème.