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


739

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.



@Dukeling merci, je suis presque sûr d'avoir commenté avec ce lien, mais il semble qu'il y ait des commentaires manquants. En outre, concernant votre modification: je pense que le fait d'avoir "canonique" et "asynchronicité" dans le titre aide lors de la recherche de cette question pour marquer une autre question comme dupe. Et bien sûr, cela aide également à trouver cette question de Google lors de la recherche d'explications d'asynchronicité.
Fabrício Matté

5
En y réfléchissant un peu plus, "le sujet canonique d'asynchronicité" est un peu lourd sur le titre, "la référence de code asynchrone" est plus simple et plus objectif. Je crois également que la plupart des gens recherchent "asynchrone" au lieu de "asynchronicité".
Fabrício Matté

2
Certaines personnes initialisent leur variable avant l'appel de fonction. Que diriez-vous de changer le titre qui représente cela d'une manière ou d'une autre? Comme "Pourquoi ma variable n'est-elle pas modifiée après l'avoir modifiée à l'intérieur d'une fonction?" ?
Felix Kling

Dans tous les exemples de code que vous avez mentionnés ci-dessus, "alert (externalScopeVar);" s'exécute MAINTENANT, tandis que l'attribution de valeur à "externalScopeVar" se produit PLUS TARD (de manière asynchrone).
refactor

Réponses:


582

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:


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:

code asynchrone mis en évidence

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:


Plus de lecture sur l'asynchronicité JavaScript


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 !


1
Dans votre dernier exemple, y a-t-il une raison spécifique pour laquelle vous utilisez des fonctions anonymes ou cela fonctionnerait-il de la même manière en utilisant des fonctions nommées?
JDelage

1
Les exemples de code sont un peu étranges lorsque vous déclarez la fonction après l'avoir appelée. Fonctionne à cause du levage bien sûr, mais était-ce intentionnel?
Bergi

2
est-ce une impasse. felix kling pointe vers votre réponse et vous pointez vers felix réponse
Mahi

1
Vous devez comprendre que le code du cercle rouge est uniquement asynchrone car il est exécuté par les fonctions javascript NATIVE async. C'est une fonctionnalité de votre moteur javascript - que ce soit Node.js ou un navigateur. Elle est asynchrone car elle est transmise en tant que "rappel" à une fonction qui est essentiellement une boîte noire (implémentée en C etc.). Pour le malheureux développeur, ils sont asynchrones ... juste parce que. Si vous voulez écrire votre propre fonction asynchrone, vous devez la pirater en l'envoyant à SetTimeout (myfunc, 0). Devriez-vous faire ça? Un autre débat ... probablement pas.
Sean Anderson

@Fabricio J'ai cherché la spécification définissant le "> = 4ms clamp", mais je n'ai pas pu le trouver - J'ai trouvé une mention d'un mécanisme similaire (pour le serrage d'appels imbriqués) sur MDN - developer.mozilla.org/en-US/docs / Web / API /… - Quelqu'un at-il un lien vers la partie droite de la spécification HTML?
Sebi

156

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).


4
Mais en quoi l'alerte ou l'envoi vers la console sont-ils utiles si vous souhaitez utiliser les résultats dans un calcul différent ou les stocker dans une variable d'objet?
Ken Ingram

73

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();

Votre échantillon sur Promises est essentiellement ce que je cherchais depuis quelques heures. Votre exemple est magnifique et explique en même temps Promises. Pourquoi ce n'est pas ailleurs est époustouflant.
Vincent P

C'est très bien, mais que faire si vous devez appeler getMessage () avec des paramètres? Comment écririez-vous ce qui précède dans ce scénario?
Chiwda

2
@Chiwda Vous venez de mettre le paramètre callback dernier: function getMessage(param1, param2, callback) {...}.
JohnnyHK

J'essaie votre async/awaitéchantillon, mais je rencontre des problèmes. Au lieu d'instancier un new Promise, je passe un .Get()appel et n'ai donc accès à aucune resolve()méthode. Ainsi, mon getMessage()retourne la promesse et non le résultat. Pourriez-vous modifier un peu votre réponse pour afficher une syntaxe de travail pour cela?
InteXX

@InteXX Je ne sais pas ce que tu veux dire par un .Get()appel. Il est probablement préférable de poster une nouvelle question.
JohnnyHK

56

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

Les fonctions asynchrones ressemblent à ...

appel asynchrone pour le café


14
Alors qu'essayer de faire fonctionner une fonction asynchrone de manière synchrone, ce serait essayer de boire le café en 1 seconde, et de le verser sur vos genoux en 1 minute.
Teepeemm

S'il s'agissait d'une évidence, je ne pense pas que la question aurait été posée, non?
broccoli2000

2
@ broccoli2000 Je ne voulais pas dire par là que la question était évidente, mais que ce que la coupe représente dans le dessin est évident :)
Johannes Fahrenkrug

14

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.


or by waiting on the asynchronous callsComment fait-on cela?
InteXX

@InteXX En utilisant une méthode de rappel
Teja

Avez-vous un exemple de syntaxe rapide?
InteXX

11

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.

entrez la description de l'image ici

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.

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.

entrez la description de l'image ici Cette fois, rappel ajax.

4.

entrez la description de l'image ici

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.

entrez la description de l'image ici

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.