jQuery fonctions de rappel (callback)

Somaire

jQuery fonctions callback()

jQuery cours tutorial

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 exécutée après que l'animation (effet) en cours est terminée.

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

Sélectionner le code


  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("p").hide(1000);
              alert("The paragraph is now hidden");
     
    });
  });
  </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()

Sélectionner le code

  <!DOCTYPE html>
   <html lang="en">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo sélecteur</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script type="text/javascript">
  $(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>


Cours precedent:
cours precedent  Les effets jQuery 		    Sommaire de :
JQuery 		 Cours suivant:
jQuery manipulation html    cours suivant
Par gerywa 25 juillet 2014