IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Les fonctions de rappel (callback) ou les utilisations cachées de eval() [Tutoriel]


Sujet :

JavaScript

  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 107
    Points
    91 107
    Billets dans le blog
    20
    Par défaut Les fonctions de rappel (callback) ou les utilisations cachées de eval()
    Il existe de nombreux cas en JavaScript qui nécessitent l'utilisation de fonctions de rappel (callback en anglais).
    Une fonction de rappel est une fonction passée en paramètre d'une autre fonction. Pour JavaScript, c'est le cas par exemple de setTimeout(), setInterval() ou encore des fonctions appelées par un gestionnaire d'événement.

    Cette notion de fonction de rappel est d'autant plus difficile à appréhender pour les débutants qu'il existe différentes façons distinctes de la définir, dont certaines erronées.

    Les trois plus fréquentes sont les suivantes :

    1. document.onclick = maFonction();
    2. document.onclick = "maFonction()";
    3. document.onclick = maFonction;
    1. setTimeout(maFonction(), délai);
    2. setTimeout("maFonction()", délai);
    3. setTimeout(maFonction, délai);
    Les exemples (1) sont tout simplement faux et ne produiront pas le résultat attendu. Ils sont un mélange entre les deux formes suivantes et dus à la confusion entre une fonction et le résultat de l'exécution de celle-ci.
    Lorsque l'interpréteur JavaScript rencontre la notation maFonction() (donc avec les parenthèses), il comprend qu'il faut exécuter la fonction et le fait donc sur le champ. Or ce qu'attendent les méthodes nécessitant une fonction de rappel, c'est une référence à la fonction. Avec la notation des exemples (1), c'est le résultat de l'exécution qui sera affecté au clic ou au timer, sans attendre le moment souhaité par le développeur.
    Les exemples (2) sont syntaxiquement corrects, mais fortement marqués d'obsolescence. En fait, dans ces cas ci, il n'y a pas de fonction de rappel de définie mais une portion de code qui sera évaluée au moment de l'appel. En interne, JavaScript va utiliser la méthode eval() pour interpréter le code, comme le montre l'exemple suivant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function eval(){
        alert('eval() is evil !');
    }
    function toto(){
        alert('toto');
    }
    document.onclick = "toto()";
    Dans cet exemple, c'est bien le message eval() is evil ! qui sera affiché. Cette façon de procéder, liée à la préhistoire de JavaScript, est fortement déconseillée !

    Dans les exemples (3), c'est bien la référence à la fonction qui est utilisée. De ce fait, lorsque le moment sera venu, cette fonction pourra être exécutée sans passer par l'utilisation de eval(), comme le montre l'exemple suivant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function eval(){ 
        alert('eval() is evil !'); 
    } 
    function toto(){ 
        alert('toto'); 
    } 
    document.onclick = toto;
    C'est bien le message toto qui est affiché lors du clic sur la page.

    Note : si vous utilisez une console (par exemple celle de Firebug) pour tester les codes ci-dessus et que vous faites "Exécuter" deux fois de suite, vous obtiendrez le message eval() is evil, cela est dû au fait que l'injection du code dans le document utilise elle aussi des méthodes utilisant en interne eval() qui vient d'être redéfinie.

    Mais alors, comment passer des paramètres à la fonction de rappel ?

    Effectivement, le seul moyen de passer des paramètres à la fonction de rappel était celle des exemples (2), qui sont déconseillés.
    Pour passer des paramètres, il va falloir utiliser une quatrième technique qui consiste à englober l'appel de la fonction de rappel dans une fonction anonyme. Cette fonction anonyme étant définie au moment de l'affectation, elle correspond donc à une référence à une fonction et non à une exécution de celle-ci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function eval(){ 
        alert('eval() is evil !'); 
    } 
    function toto(texte){ 
        alert(texte); 
    } 
    document.onclick = function(){ 
        toto('Paramètre !'); 
    };
    Ce code affiche bien le paramètre passé à la fonction toto, elle-même englobée dans une fonction anonyme.

    Billet original publié sur les blogs de developpez.com...
    Billet original
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre averti Avatar de kalimukti
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2011
    Messages
    262
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : octobre 2011
    Messages : 262
    Points : 437
    Points
    437
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    document.onclick = function(){ 
        toto('Paramètre !'); 
    };
    Ce code affiche bien le paramètre passé à la fonction toto, elle-même englobée dans une fonction anonyme.
    Bonjour, et merci pour ce billet instructif.
    pour le code en question: une première approche de la closure nan ?
    Vous serait-il possible de développer ce sujet dans le futur ? Je croise souvent ce concept en programmation "objets" en javascript et j'ai vraiment du mal à le saisir (le principe comme les avantages m'échappent encore beaucoup)...
    1 merci pour ce billet (et 1000 si vous trouvez un des ces 4 le temps de nous éclairer sur la closure... )
    My daughter, my laptop, my bike and my double-sticks...

  3. #3
    Membre habitué
    Homme Profil pro
    Inscrit en
    juin 2012
    Messages
    136
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : juin 2012
    Messages : 136
    Points : 174
    Points
    174
    Par défaut
    Je comprend pas trop l'intérêt...
    Pourquoi pas tout de suite faire le alert(); ?

Discussions similaires

  1. [Débutant] Les variables globales et locales dans les fonctions
    Par zakimadrid dans le forum MATLAB
    Réponses: 8
    Dernier message: 28/04/2015, 01h34
  2. Réponses: 11
    Dernier message: 21/11/2014, 18h50
  3. Réponses: 2
    Dernier message: 27/04/2010, 17h33
  4. Réponses: 3
    Dernier message: 31/12/2005, 23h09
  5. Réponses: 11
    Dernier message: 22/12/2003, 21h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo