Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 3 sur 3
  1. #1
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    22 013
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 22 013
    Points : 80 741
    Points
    80 741

    Par défaut [Article] 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 :
    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 :
    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 :
    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 actif
    Homme Profil pro Lionel Chaumeau
    Développeur Web
    Inscrit en
    octobre 2011
    Messages
    114
    Détails du profil
    Informations personnelles :
    Nom : Homme Lionel Chaumeau
    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 : 114
    Points : 195
    Points
    195

    Par défaut

    Citation Envoyé par Bovino Voir le message
    Code :
    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 laptop, my bike and my double-sticks...

  3. #3
    Membre habitué
    Homme Profil pro Pierre-Marie Westeel
    Inscrit en
    juin 2012
    Messages
    133
    Détails du profil
    Informations personnelles :
    Nom : Homme Pierre-Marie Westeel
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : juin 2012
    Messages : 133
    Points : 124
    Points
    124

    Par défaut

    Je comprend pas trop l'intérêt...
    Pourquoi pas tout de suite faire le alert(); ?

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •