Comment récupérer une valeur asynchrone en JavaScript avec jQuery ?

Récupération de valeurs asynchrones en JavaScript avec jQuery

En JavaScript, la gestion du code asynchrone peut être difficile, en particulier lorsque l'on tente de récupérer et d'attribuer des valeurs de retour . Considérez la fonction jQuery suivante :

<code class="javascript">function trackPage(){
    var elqTracker = new jQuery.elq(459);
    elqTracker.pageTrack({
        success: function() {
            elqTracker.getGUID(function(guid) {
                alert(guid);
                var returnValue = guid;
            });
        }
    });
    return returnValue;
}

var someGuid = trackPage();</code>

Bien que la fonction alert() affiche correctement la valeur GUID, son attribution à une variable, someGuid, entraîne une valeur non définie. Cela est dû à la nature asynchrone de la méthode getGUID() de jQuery.

La nature des appels asynchrones

Les appels asynchrones, comme celui de l'exemple, s'exécutent indépendamment de le déroulement principal du programme. Lorsque la méthode getGUID() est appelée, elle s'exécute immédiatement et retourne avant que son résultat ne soit disponible. Par conséquent, la variable returnValue est affectée non définie.

Solutions alternatives

Pour résoudre ce problème, plusieurs approches peuvent être utilisées :

1. Fonctions de rappel

Les fonctions de rappel, comme suggéré par dfsq, fournissent un mécanisme pour transmettre une fonction qui recevra le résultat de l'appel asynchrone. Cependant, cette approche peut devenir compliquée lorsque plusieurs fonctions de rappel imbriquées sont requises.

2. jQuery $.Deferred

L'objet $.Deferred de jQuery permet à une logique asynchrone personnalisée de renvoyer une promesse. Les promesses permettent d'attacher des rappels au résultat d'un appel asynchrone sans avoir besoin d'une imbrication profonde. Le code mis à jour ci-dessous illustre cette approche :

<code class="javascript">function trackPage(){
    var elqTracker = new jQuery.elq( 459 ),
        dfd = $.Deferred();

    elqTracker.pageTrack({
        success: function() {
            elqTracker.getGUID(function( guid ) {
                dfd.resolve( guid );
            });
        }
    });

    return dfd.promise();
}

// example use:
trackPage().done(function( guid ) {
    alert( "Got GUID:" + guid );
});</code>

Ajouter des rappels aux promesses offre une plus grande flexibilité et permet un code plus organisé. En renvoyant des promesses, d'autres codes peuvent également consommer et attendre les résultats des appels asynchrones.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!