Créer une fonction JavaScript avec un callback

25 Septembre 2014 à 00:00 Programmation

Je ne publierai plus rien sur ce blog. Un nouveau blog existe maintenant. Il se nomme Hardly Smart.

Vous pourrez y retrouver des astuces plus larges sur l'informatique ainsi que mes anciens billets de blog.

Je vous souhaite une bonne lecture sur Hardly Smart.


Lorsque vous faites de la programmation en JavaScript, vous éxecutez sans doute des fonctions et des fois vous avez besoin d'une fonction se termine pour appeler une nouvelle fonction. Donc vous avez besoin d'un callback. Voici comment créer un callback en JavaScript.

J'utilise souvent jQuery et le système de fadeOut, fadeIn pour faire apparaître du contenu et l'avantage de ces fonctions, est qu'elle disposent d'un callback, qui vous permet par exemple de retirer la div du DOM une fois votre fadeOut terminé.

Voici une fonction très simple qui permet de calculer une somme.

function calculer(nb1, nb2, callback) {
    var sum = parseFloat(nb1) + parseFloat(nb2)

    // Je regarde si callback est différent
    if(callback !== undefined) {
        callback(sum);
    }
}

// Je lance mon calcule
calculer(2, 3, function(sum) {
    alert(sum);
    // Mon alert ne va se déclencher qu'une fois le calcule terminé
});

Bon là, je suis d'accord avec vous, le callback ne sert pas à grand chose car le système traite l'information directement. Si vous voulez voir en details le système, essayez de mettre un setTimeout de 1000ms avant le callback

Mais par exemple si vous avez une fonction qui doit télécharger un fichier à partir d'un serveur distant, vous pourrez alors mettre un loader et dès que vous aurez eu votre callback dire à l'utilisateur que son téléchargement est terminé.

Articles liés

Les commentaires ont été désactivés.

1 commentaire

DrDIASOLUKA 6 Octobre 2018 à 10:16

Bonjour, un petit commentaire pour les néophytes comme moi que ça peut aider.


La physiologie (le fonctionnement) de ce code :

<script type = "text/javascript"> "use strict";
function calculer(nb1, nb2, f_callback) {
console.dir("On entre dans calculer()")
var sum = parseFloat(nb1) + parseFloat(nb2)

// Je regarde si f_callback est différent
if(f_callback !== undefined) {
f_callback(sum);
}
console.dir("On quitte calculer()")
}

// Je lance mon calcule
calculer(2, 3, function p3(p_p3) {
console.dir("On rentre dans p3()")
console.dir(p_p3);
// Mon alert ne va se déclencher qu'une fois le calcule terminé
console.dir("On quitte p3()")
} // Fin définition de la fonction p3.
, (function(){console.log("On quitte l'Appelant")})()
) // Fin de [la description de] l'Appel.
;
</script>

<!-- Fonctionnement de ce code :

L'exécution de ce code commence à la ligne 14 avec l'appel de la fonction "calculer()" avec ses trois paramètres, les deux opérandes et la définition de la fonction CALLBACK donc un pointeur sur l'adresse-mémoire du corps de cette fonction. Une fonction Callback est une fonction de rappel utilisée comme paramètre d’une autre fonction et qui sera appelée et éventuellement rappelée [à la fin de l'exécution de cette dernière] pour chacun des éléments d'une variable-collection passée aussi en paramètre. Cette fonction qui est ici le troisième paramètre de la fonction calculer() et que nous avons nommée ici p3 admettra explicitement à son tour un paramètre.

Dans la fonction calculer() [voir ligne 3 à l'affichage de la console], la variable locale sum de la fonction calculer est calculée à partir de ses deux premiers paramètres.

C'est à la ligne 8 de la fonction calculer() que la fonction callback p3 est appelée si la vérification à la ligne 7 donne true donc si ce callback est spécifiée lors de l'appel à la fonction calculer().

Il s'affiche donc ceci, particulièrement les lignes 29, 31 et 35:

[
On quitte l'Appelant test.html:39:16
On entre dans calculer() test.html:5:5
On rentre dans p3() test.html:29:5
5 test.html:31:5
On quitte p3() test.html:35:5
On quitte calculer() test.html:19:5
]



Bonus :
Nous avons introduit un quatrième argument durant l'appel de la fonction calculer(), cet argument est une fonction à exécution immédiate qui s'exécute donc déjà lors de la passation des arguments de l'appelant à l'appelée et qui n'a en fait pas besois d'être exécutée dans la fonction appelée. C'est juste pour montrer une possibilité supplémentaire de JavaScript.



Encore une petite variante, l'argument fonction p3 est définie en dehors de la liste d'arguments.

<script type = "text/javascript"> "use strict";
function calculer(nb1, nb2, f_callback) {
console.dir("On entre dans calculer()")
var sum = parseFloat(nb1) + parseFloat(nb2)

// Je regarde si f_callback est différent
if(f_callback !== undefined) {
f_callback(sum);
}
console.dir("On quitte calculer()")
}


var p3 = (p_p3) => {
console.dir("On rentre dans p3()")
console.dir(p_p3);
// Mon alert ne va se déclencher qu'une fois le calcule terminé
console.dir("On quitte p3()")
} // Fin définition de la fonction fléchée p3.


// Je lance mon calcule
calculer(2, 3, p3, (function(){console.log("On quitte l'Appelant")})()
) // Fin de [la description de] l'Appel.


Exécution:

On quitte l'Appelant test.html:23:32
On entre dans calculer() test.html:3:5
On rentre dans p3() test.html:15:5
5 test.html:16:5
On quitte p3() test.html:18:5
On quitte calculer() test.html:10:5



Une autre utilisation de ce code, elle calcule les Indices de masse corporelle du Dr DIASOLUKA et du statisticien belge Quetelet, avec fonction imbriquée (fonction dans une fonction) et création de variable statique dans JavaScript.



Taille_H [cm]: <input id="taille" value=172>
Poids [kgs]: <input id="poids" value=80>
<input onclick='flaunch()' value='GO'>

<script type = "text/javascript"> "use strict";
// Définition fonction englobante fcptr pour
// nous définir une variable statique cptr.
// utilisable par la fonction fIMC incarnée.
function fcptr(){
var cptr=0 // variable static utilisable par fIMC

// Définition fonction retournée, fIMC.
return function fIMC(taille_H, pds, f_Callback) {
console.dir("||||| On entre dans fIMC")
var computed_imc; // variable locale de fIMC.

switch(cptr) {
case(0):
computed_imc = Math.pow(parseFloat(pds),2) / parseFloat(taille_H) + " [kg²/cm]";
break;
case(1):
computed_imc = parseFloat(pds) / Math.pow(parseFloat(taille_H/100),2) + " [kg/m²]";
break;
case(2):
computed_imc = 1.3*parseFloat(pds) / Math.pow(parseFloat(taille_H/100),2.5) + " [kg/m²]";
break;
}
cptr++;

// Si param f_Callback existe on l'appelle
if(f_Callback !== undefined) {
f_Callback(computed_imc);
}
console.dir("On quitte fIMC /////")
}
}

var flauncher;
function flaunch() {
console.log("==========");
flauncher =fcptr();
const pds=document.getElementById('poids').value,
tHt=document.getElementById('taille').value;

// Appel de fonction, contenant un callback
flauncher(tHt, pds, function(imc) {
console.dir("On entre dans l'Appelant1")
console.dir("]***[ IMC_DIAS = " + imc);
console.dir("On quitte l'Appelant1")
// Mon console.dir ne va se déclencher qu'une fois le calcule terminé
});

// Appel de fonction, contenant un callback
flauncher(tHt, pds, function p3(imc) {
console.dir("On entre dans l'Appelant2")
console.dir("]***[ IMC_QUET = "+imc);
console.dir("On quitte l'Appelant2")
// Mon console.dir ne va se déclencher qu'une fois le calcule terminé
});

// Appel de fonction, contenant un callback
flauncher(tHt, pds, function p3(imc) {
console.dir("On entre dans l'Appelant3")
console.dir("]***[ IMC_NICK_TREFETHEN = "+imc);
console.dir("On quitte l'Appelant3")
// Mon console.dir ne va se déclencher qu'une fois le calcule terminé
});
}
</script>


<!--

========== test.html:78:3
||||| On entre dans fIMC test.html:27:5
On entre dans l'Appelant1 test.html:92:9
]***[ IMC_DIAS = 37.2093023255814 [kg²/cm] test.html:94:9
On quitte l'Appelant1 test.html:96:9
On quitte fIMC ///// test.html:66:5
||||| On entre dans fIMC test.html:27:5
On entre dans l'Appelant2 test.html:108:9
]***[ IMC_QUET = 27.041644131963228 [kg/m²] test.html:110:9
On quitte l'Appelant2 test.html:112:9
On quitte fIMC ///// test.html:66:5
||||| On entre dans fIMC test.html:27:5
On entre dans l'Appelant3 test.html:123:9
]***[ IMC_NICK_TREFETHEN = 26.804778 [kg/m²] test.html:125:9
On quitte l'Appelant3 test.html:127:9
On quitte fIMC ///// test.html:66:5

-->


Merci à tous, et surtout à l'auteur de cet article qui m'a beaucoup inspiré et retenu toute mon attention et mon intérêt.