Pourquoi ma variable n'est-elle pas modifiée après l'avoir modifiée à l'intérieur d'une fonction? - Référence de code asynchrone

Compte tenu des exemples suivants, pourquoi n'est-il outerScopeVarpas défini dans tous les cas?

var outerScopeVar;

var img = document.createElement('img');
img.onload = function() {
    outerScopeVar = this.width;
};
img.src = 'lolcat.png';
alert(outerScopeVar);

var outerScopeVar;
setTimeout(function() {
    outerScopeVar = 'Hello Asynchronous World!';
}, 0);
alert(outerScopeVar);

// Example using some jQuery
var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
});
alert(outerScopeVar);

// Node.js example
var outerScopeVar;
fs.readFile('./catdog.html', function(err, data) {
    outerScopeVar = data;
});
console.log(outerScopeVar);

// with promises
var outerScopeVar;
myPromise.then(function (response) {
    outerScopeVar = response;
});
console.log(outerScopeVar);

// geolocation API
var outerScopeVar;
navigator.geolocation.getCurrentPosition(function (pos) {
    outerScopeVar = pos;
});
console.log(outerScopeVar);

Pourquoi est-il affiché undefineddans tous ces exemples? Je ne veux pas de solutions de contournement, je veux savoir pourquoi cela se produit.

Remarque: Il s'agit d'une question canonique pour l' asynchronicité JavaScript . N'hésitez pas à améliorer cette question et à ajouter des exemples plus simplifiés auxquels la communauté peut s'identifier.

Réponse en un mot: asynchronicité .

Préface

Ce sujet a été répété au moins quelques milliers de fois, ici, dans Stack Overflow. Par conséquent, je voudrais tout d'abord souligner quelques ressources extrêmement utiles:

• @Felix Kling's answer to "Comment renvoyer la réponse d'un appel asynchrone?" . Voir son excellente réponse expliquant les flux synchrones et asynchrones, ainsi que la section "Code de restructuration".
  @Benjamin Gruenbaum a également mis beaucoup d'efforts pour expliquer l'asynchronicité dans le même fil.

• La réponse de @Matt Esch à «Récupérer les données de fs.readFile» explique également très bien l'asynchronicité de manière simple.

La réponse à la question posée

Voyons d'abord le comportement commun. Dans tous les exemples, le outerScopeVarest modifié à l'intérieur d'une fonction . Cette fonction n'est clairement pas exécutée immédiatement, elle est affectée ou passée en argument. C'est ce que nous appelons un rappel .

Maintenant, la question est, quand ce rappel est-il appelé?

Cela dépend du cas. Essayons à nouveau de tracer un comportement courant:

• img.onloadpeut être appelée dans le futur , lorsque (et si) l'image a été chargée avec succès.
• setTimeoutpeut être appelé dans le futur , une fois le délai expiré et le délai d'attente n'a pas été annulé par clearTimeout. Remarque: même en cas d'utilisation en 0tant que délai, tous les navigateurs ont un plafond de délai d'expiration minimum (spécifié à 4 ms dans la spécification HTML5).
• $.postLe rappel de jQuery peut être appelé dans le futur , lorsque (et si) la requête Ajax a été effectuée avec succès.
• Node.js fs.readFilepeut être appelé dans le futur , lorsque le fichier a été lu avec succès ou a généré une erreur.

Dans tous les cas, nous avons un rappel qui peut s'exécuter dans le futur . Ce «dans le futur» est ce que nous appelons le flux asynchrone .

L'exécution asynchrone est poussée hors du flux synchrone. Autrement dit, le code asynchrone ne s'exécutera jamais pendant l'exécution de la pile de code synchrone. C'est la signification de JavaScript étant un thread unique.

Plus spécifiquement, lorsque le moteur JS est inactif - n'exécutant pas une pile de (a) code synchrone - il interrogera les événements qui peuvent avoir déclenché des rappels asynchrones (par exemple, délai d'expiration, réponse du réseau reçue) et les exécutera l'un après l'autre. Ceci est considéré comme une boucle d'événement .

C'est-à-dire que le code asynchrone mis en évidence dans les formes rouges dessinées à la main ne peut s'exécuter qu'après l'exécution de tout le code synchrone restant dans leurs blocs de code respectifs:

En bref, les fonctions de rappel sont créées de manière synchrone mais exécutées de manière asynchrone. Vous ne pouvez tout simplement pas compter sur l'exécution d'une fonction asynchrone jusqu'à ce que vous sachiez qu'elle a été exécutée, et comment faire cela?

C'est simple, vraiment. La logique qui dépend de l'exécution de la fonction asynchrone doit être démarrée / appelée depuis l'intérieur de cette fonction asynchrone. Par exemple, déplacer les alerts et console.logs trop à l'intérieur de la fonction de rappel produirait le résultat attendu, car le résultat est disponible à ce stade.

Implémentation de votre propre logique de rappel

Souvent, vous devez faire plus de choses avec le résultat d'une fonction asynchrone ou faire différentes choses avec le résultat selon l'endroit où la fonction asynchrone a été appelée. Prenons un exemple un peu plus complexe:

var outerScopeVar;
helloCatAsync();
alert(outerScopeVar);

function helloCatAsync() {
    setTimeout(function() {
        outerScopeVar = 'Nya';
    }, Math.random() * 2000);
}

Remarque: J'utilise setTimeoutavec un retard aléatoire comme fonction générique asynchrone, le même exemple s'applique à Ajax readFile, onloadet à tout autre flux asynchrone.

Cet exemple souffre clairement du même problème que les autres exemples, il n'attend pas que la fonction asynchrone s'exécute.

Abordons-le en mettant en œuvre notre propre système de rappel. Tout d'abord, nous nous débarrassons de ce vilain outerScopeVarqui est complètement inutile dans ce cas. Ensuite, nous ajoutons un paramètre qui accepte un argument de fonction, notre rappel. Lorsque l'opération asynchrone se termine, nous appelons ce rappel en passant le résultat. L'implémentation (veuillez lire les commentaires dans l'ordre):

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    alert(result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    // 3. Start async operation:
    setTimeout(function() {
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

Extrait de code de l'exemple ci-dessus:

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
console.log("1. function called...")
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    console.log("5. result is: ", result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    console.log("2. callback here is the function passed as argument above...")
    // 3. Start async operation:
    setTimeout(function() {
    console.log("3. start async operation...")
    console.log("4. finished async operation, calling the callback, passing the result...")
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

Le plus souvent dans des cas d'utilisation réels, l'API DOM et la plupart des bibliothèques fournissent déjà la fonctionnalité de rappel (l' helloCatAsyncimplémentation dans cet exemple démonstratif). Il vous suffit de passer la fonction de rappel et de comprendre qu'elle s'exécutera hors du flux synchrone, et de restructurer votre code pour s'adapter à cela.

Vous remarquerez également qu'en raison de la nature asynchrone, il est impossible de returnrenvoyer une valeur d'un flux asynchrone au flux synchrone où le rappel a été défini, car les rappels asynchrones sont exécutés longtemps après que le code synchrone a déjà terminé son exécution.

Au lieu d' returningérer une valeur à partir d'un rappel asynchrone, vous devrez utiliser le modèle de rappel, ou ... Promesses.

Promesses

Bien qu'il existe des moyens de garder l' enfer de rappel à distance avec vanilla JS, les promesses gagnent en popularité et sont actuellement en cours de standardisation dans ES6 (voir Promise - MDN ).

Promises (aka Futures) offre une lecture plus linéaire et donc agréable du code asynchrone, mais expliquer toute leur fonctionnalité est hors de portée de cette question. Au lieu de cela, je laisse ces excellentes ressources aux intéressés:

• Promesses JavaScript - HTML5 Rocks
• Vous manquez le point de promesses - domenic.me

Plus de lecture sur l'asynchronicité JavaScript

• The Art of Node - Callbacks explique très bien le code asynchrone et les rappels avec des exemples JS vanilla et du code Node.js.

Remarque: J'ai marqué cette réponse comme Wiki communautaire, donc toute personne ayant au moins 100 réputations peut la modifier et l'améliorer! N'hésitez pas à améliorer cette réponse ou à soumettre une toute nouvelle réponse si vous le souhaitez également.

Je veux transformer cette question en un sujet canonique pour répondre aux problèmes d'asynchronicité qui ne sont pas liés à Ajax (il y a Comment retourner la réponse d'un appel AJAX? Pour cela), donc ce sujet a besoin de votre aide pour être aussi bon et utile que possible !

La réponse de Fabrício est parfaite; mais je voulais compléter sa réponse par quelque chose de moins technique, qui se concentre sur une analogie pour aider à expliquer le concept d'asynchronicité .

Une analogie ...

Hier, le travail que je faisais exigeait des informations d'un collègue. Je l'ai appelé; voici comment s'est déroulée la conversation:

Moi : Salut Bob, je dois savoir comment nous foo « d la barre » d la semaine dernière. Jim veut un rapport à ce sujet, et vous êtes le seul à en connaître les détails.

Bob : Bien sûr, mais cela me prendra environ 30 minutes?

Moi : c'est super Bob. Donnez-moi un coup de fil quand vous aurez les informations!

À ce stade, j'ai raccroché le téléphone. Comme j'avais besoin d'informations de Bob pour terminer mon rapport, j'ai quitté le rapport et je suis allé prendre un café à la place, puis j'ai rattrapé un e-mail. 40 minutes plus tard (Bob est lent), Bob a rappelé et m'a donné les informations dont j'avais besoin. À ce stade, j'ai repris mon travail avec mon rapport, car j'avais toutes les informations dont j'avais besoin.

Imaginez si la conversation s'était déroulée comme ça à la place;

Moi : Salut Bob, je dois savoir comment nous foo « d la barre » d la semaine dernière. Jim veut un rapport à ce sujet, et vous êtes le seul à en connaître les détails.

Bob : Bien sûr, mais cela me prendra environ 30 minutes?

Moi : c'est super Bob. J'attendrai.

Et je me suis assis là et j'ai attendu. Et attendu. Et attendu. Pendant 40 minutes. Ne rien faire mais attendre. Finalement, Bob m'a donné l'information, nous avons raccroché et j'ai terminé mon rapport. Mais j'avais perdu 40 minutes de productivité.

Il s'agit d'un comportement asynchrone ou synchrone

C'est exactement ce qui se passe dans tous les exemples de notre question. Charger une image, charger un fichier sur le disque et demander une page via AJAX sont toutes des opérations lentes (dans le contexte de l'informatique moderne).

Plutôt que d' attendre la fin de ces opérations lentes, JavaScript vous permet d'enregistrer une fonction de rappel qui sera exécutée une fois l'opération lente terminée. Dans l'intervalle, cependant, JavaScript continuera d'exécuter d'autres codes. Le fait que JavaScript exécute un autre code en attendant la fin de l'opération lente rend le comportement asynchrone . Si JavaScript avait attendu la fin de l'opération avant d'exécuter tout autre code, cela aurait été un comportement synchrone .

var outerScopeVar;    
var img = document.createElement('img');

// Here we register the callback function.
img.onload = function() {
    // Code within this function will be executed once the image has loaded.
    outerScopeVar = this.width;
};

// But, while the image is loading, JavaScript continues executing, and
// processes the following lines of JavaScript.
img.src = 'lolcat.png';
alert(outerScopeVar);

Dans le code ci-dessus, nous demandons à JavaScript de se charger lolcat.png, ce qui est une opération lente . La fonction de rappel sera exécutée une fois cette opération lente terminée, mais en attendant, JavaScript continuera de traiter les lignes de code suivantes; ie alert(outerScopeVar).

C'est pourquoi nous voyons l'alerte apparaître undefined; puisque le alert()est traité immédiatement, plutôt qu'après le chargement de l'image.

Afin de corriger notre code, tout ce que nous avons à faire est de déplacer le alert(outerScopeVar)code dans la fonction de rappel. Par conséquent, nous n'avons plus besoin de la outerScopeVarvariable déclarée comme variable globale.

var img = document.createElement('img');

img.onload = function() {
    var localScopeVar = this.width;
    alert(localScopeVar);
};

img.src = 'lolcat.png';

Vous verrez toujours qu'un rappel est spécifié en tant que fonction, car c'est le seul * moyen en JavaScript pour définir du code, mais ne l'exécutez que plus tard.

Par conséquent, dans tous nos exemples, le function() { /* Do something */ }est le rappel; pour corriger tous les exemples, il suffit de déplacer le code qui a besoin de la réponse de l'opération là-dedans!

^{* Techniquement, vous pouvez également l'utiliser eval(), mais il eval()est mauvais à cet effet}

Comment faire attendre mon appelant?

Vous pourriez avoir actuellement un code similaire à celui-ci;

function getWidthOfImage(src) {
    var outerScopeVar;

    var img = document.createElement('img');
    img.onload = function() {
        outerScopeVar = this.width;
    };
    img.src = src;
    return outerScopeVar;
}

var width = getWidthOfImage('lolcat.png');
alert(width);

Cependant, nous savons maintenant que cela return outerScopeVarse produit immédiatement; avant que la onloadfonction de rappel n'ait mis à jour la variable. Cela conduit à getWidthOfImage()revenir undefinedet à undefinedêtre alerté.

Pour résoudre ce problème, nous devons autoriser la fonction appelante getWidthOfImage()à enregistrer un rappel, puis déplacer l'alerte de la largeur pour qu'elle soit comprise dans ce rappel;

function getWidthOfImage(src, cb) {     
    var img = document.createElement('img');
    img.onload = function() {
        cb(this.width);
    };
    img.src = src;
}

getWidthOfImage('lolcat.png', function (width) {
    alert(width);
});

... comme précédemment, notez que nous avons pu supprimer les variables globales (dans ce cas width).

Voici une réponse plus concise pour les personnes qui recherchent une référence rapide ainsi que quelques exemples utilisant promesses et async / wait.

Commencez par l'approche naïve (qui ne fonctionne pas) pour une fonction qui appelle une méthode asynchrone (dans ce cas setTimeout) et renvoie un message:

function getMessage() {
  var outerScopeVar;
  setTimeout(function() {
    outerScopeVar = 'Hello asynchronous world!';
  }, 0);
  return outerScopeVar;
}
console.log(getMessage());

undefinedobtient enregistré dans ce cas, car getMessageretourne avant l' setTimeoutappel du rappel et met à jour outerScopeVar.

Les deux principaux moyens de le résoudre sont d'utiliser des rappels et des promesses :

Rappels

Le changement ici est qu'il getMessageaccepte un callbackparamètre qui sera appelé pour renvoyer les résultats au code appelant une fois disponible.

function getMessage(callback) {
  setTimeout(function() {
    callback('Hello asynchronous world!');
  }, 0);
}
getMessage(function(message) {
  console.log(message);
});

Promesses

Les promesses offrent une alternative plus flexible que les rappels car elles peuvent être naturellement combinées pour coordonner plusieurs opérations asynchrones. A Promises / A + implémentation standard est nativement fournie dans Node.js (0.12+) et de nombreux navigateurs actuels, mais il est également mis en œuvre dans les bibliothèques comme Bluebird et Q .

function getMessage() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Hello asynchronous world!');
    }, 0);
  });
}

getMessage().then(function(message) {
  console.log(message);  
});

jQuery différés

jQuery fournit des fonctionnalités similaires aux promesses avec ses différés.

function getMessage() {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve('Hello asynchronous world!');
  }, 0);
  return deferred.promise();
}

getMessage().done(function(message) {
  console.log(message);  
});

asynchrone / attendre

Si votre environnement JavaScript inclut la prise en charge de asyncet await(comme Node.js 7.6+), vous pouvez utiliser les promesses de manière synchrone dans les asyncfonctions:

function getMessage () {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Hello asynchronous world!');
        }, 0);
    });
}

async function main() {
    let message = await getMessage();
    console.log(message);
}

main();

Pour dire l'évidence, la coupe représente outerScopeVar.

Les fonctions asynchrones ressemblent à ...

Les autres réponses sont excellentes et je veux juste apporter une réponse simple à cela. Limiter aux appels asynchrones jQuery

Tous les appels ajax (y compris $.getou $.postou $.ajax) sont asynchrones.

Considérant votre exemple

var outerScopeVar;  //line 1
$.post('loldog', function(response) {  //line 2
    outerScopeVar = response;
});
alert(outerScopeVar);  //line 3

L'exécution du code commence à partir de la ligne 1, déclare la variable et déclenche et l'appel asynchrone à la ligne 2, (c'est-à-dire la post-demande) et continue son exécution à partir de la ligne 3, sans attendre que la post-requête termine son exécution.

Supposons que la demande de publication prenne 10 secondes, la valeur de outerScopeVarne sera définie qu'après ces 10 secondes.

Essayer,

var outerScopeVar; //line 1
$.post('loldog', function(response) {  //line 2, takes 10 seconds to complete
    outerScopeVar = response;
});
alert("Lets wait for some time here! Waiting is fun");  //line 3
alert(outerScopeVar);  //line 4

Maintenant, lorsque vous exécutez cela, vous obtiendrez une alerte sur la ligne 3. Maintenant, attendez un certain temps jusqu'à ce que vous soyez sûr que la demande de publication a renvoyé une valeur. Ensuite, lorsque vous cliquez sur OK, dans la zone d'alerte, l'alerte suivante imprime la valeur attendue, car vous l'avez attendue.

Dans un scénario réel, le code devient,

var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
    alert(outerScopeVar);
});

Tout le code qui dépend des appels asynchrones, est déplacé à l'intérieur du bloc asynchrone, ou en attendant les appels asynchrones.

Dans tous ces scénarios, outerScopeVarune valeur est modifiée ou affectée de manière asynchrone ou se produit plus tard (en attendant ou en écoutant qu'un événement se produise), pour lequel l'exécution en cours n'attendra pas . Dans tous ces cas, le flux d'exécution en cours se traduit parouterScopeVar = undefined

Discutons de chaque exemple (j'ai marqué la partie qui est appelée de manière asynchrone ou retardée pour que certains événements se produisent):

1.

Ici, nous enregistrons un listeur d'événements qui sera exécuté lors de cet événement particulier. Ici le chargement de l'image. Ensuite, l'exécution en cours continue avec les lignes suivantes img.src = 'lolcat.png';et en alert(outerScopeVar);attendant l'événement peut ne pas se produire. c'est-à-dire, funtion img.onloadattendre que l'image référencée se charge, de manière asynchrone. Cela se produira tout l'exemple suivant - l'événement peut différer.

2.

Ici, l'événement d'expiration joue le rôle, qui invoquera le gestionnaire après l'heure spécifiée. Le voici 0, mais il enregistre toujours un événement asynchrone il sera ajouté à la dernière position de l' Event Queueexécution, ce qui rend le délai garanti.

3.

Cette fois, rappel ajax.

4.

Le nœud peut être considéré comme un roi du codage asynchrone. Ici, la fonction marquée est enregistrée comme un gestionnaire de rappel qui sera exécuté après la lecture du fichier spécifié.

5.

La promesse évidente (quelque chose sera fait à l'avenir) est asynchrone. voir Quelles sont les différences entre différé, promis et futur en JavaScript?

https://www.quora.com/Whats-the-difference-between-a-promise-and-a-callback-in-Javascript