oujood.com

jQuery fonctions de rappel (callback)

La fonction de rappel (cllback) est exécutée après que l'animation (effet) en cours soit terminée.
Les instructions JavaScript sont exécutées ligne par ligne. Mais, comme l'effet jQuery prend un certain temps pour se terminer, le code de la ligne suivante peut s'exécuter alors que l'effet précédent est toujours en cours. Pour éviter cela, jQuery fournit une fonction de rappel pour chaque méthode d'effet.

chercher |

jQuery fonctions callback()

Les scripts JavaScript sont exécutées ligne par ligne.

 Cependant, avec des animations, la ligne de code suivante peut être exécutée même si l'animation n'est pas finie.

 Ce qui peut créer des erreurs.

Pour éviter cela, vous pouvez créer une fonction de rappel.

Une fonction de rappel est une fonction qui est exécutée une fois que l'effet est terminé. La fonction de rappel est transmise en tant qu'argument aux méthodes d'effet et apparaît généralement comme le dernier argument de la méthode. Par exemple, la syntaxe de base de la méthode d'effet jQuery hide() avec une fonction de rappel peut être présentée comme suit :

jQuery exemple Callback

Syntaxe :

$(selector).hide(speed,callback)

Le paramètre de rappel callback est une fonction qui doit être exécutée après l'achèvement de l'effet  masquer hide():

Exemple sans rappel

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple sans la fonction callback jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").hide(1000);
              alert("Le paragraphe est maintenant caché");
     
    });
  });
  </script>
   
  <style type="text/css">
  div.panel
  {
  margin:10px;
  margin-left:200px;
  padding:5px;
  text-align:center;
  background:#FFFF00;
  border:solid 1px #c3c3c3;width:400px;
  }
  div.panel
  {
  dispmay:none;
  }
  </style>
  </head>
   
  <body>
    <button>Cliquez pour voir</button>
  <div class="panel">
   <p>Parce le temps est précieux, nous livrons un
  apprentissage rapide et facile. <br />
   Pas beaucoup de blabla, juste ce qu’il faut pour
  apprendre</br >
   Chez Apprendre-creer-sites.com, vous pouvez étudier tout ce dont
  vous avez besoin d'apprendre, dans un format accessible et
  maniable. </p>
   
  </div>
  </body>
  </html>

Sans un paramètre de rappel, la boîte d'alerte s'affiche avant la fin de l'effet  masquer comme dans l'exemple ci dessus.

Exemple avec callback()

Et voici la version modifiée de l'exemple précédent dans laquelle nous avons placé l'instruction alert() dans une fonction de rappel pour la méthode hide(). Si vous essayez ce code, le message d'alerte s'affichera une fois que l'effet masquer sera terminé.

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple avec la fonctions callback()</title>
  <script  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").hide(1000,function(){
        alert("Le paragraphe est maintenant masqué!");
      });
    });
  });
  </script>
   
  <style type="text/css">
  div.panel
  {
  margin:10px;
  margin-left:200px;
  padding:5px;
  text-align:center;
  background:#FFFF00;
  border:solid 1px #c3c3c3;width:400px;
  }
  div.panel
  {
  dispmay:none;
  }
  </style>
  </head>
   
  <body>
    <button>Cliquez pour voir</button>
  <div class="panel">
   <p>Parce le temps est précieux, nous livrons un
  apprentissage rapide et facile. <br />
   Pas beaucoup de blabla, juste ce qu’il faut pour
  apprendre</br >
   Chez Apprendre-creer-sites.com, vous pouvez étudier tout ce dont
  vous avez besoin d'apprendre, dans un format accessible et
  maniable. </p>
   
  </div>
  </body>
  </html>

De même, vous pouvez définir les fonctions de rappel pour les autres méthodes d'effet jQuery, comme show(), slideToggle(), fadeIn(), fadeOut(), animate(), etc.

Remarque : Si la méthode d'effet est appliquée à plusieurs éléments, la fonction de rappel est exécutée une fois pour chaque élément sélectionné, et non une fois pour tous.

Code

  Copier le code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
    <title>Exemple jQuery: La fonction callback plusieurs éléments</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    h1{        
        background:red;
        padding:20px;
    }
    p{
        background:yellow;
        font-size: 24px;
        padding:20px;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle(5000, function(){
            alert("L'effet slide toggle est terminé.");
        });
    });   
});
</script>
</head>
<body>
    <h1>Voici un titre</h1>
    <p>Ceci est un paragraphe</p>
    <button type="button">Voir l'effet</button>
</body>
</html>

Si vous essayez le code d'exemple ci-dessus, il affichera le même message d'alerte deux fois, une fois pour chaque élément h1 et p, en cliquant sur le bouton de déclenchement.




Cours precedent:
  Les effets jQuery
    Sommaire de :
JQuery
 Cours suivant:
jQuery manipulation html   
Par gerywa 25 juillet 2014 - mis à jour le 27 Fevrier 2022

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web