Explication des questions d'entretien Javascript - Comportement asynchrone

Comportement asynchrone de JavaScript avec setTimeout

Introduction

Dans cet article, nous explorerons un morceau de code JavaScript fascinant qui démontre la nature asynchrone du langage, en particulier la façon dont les fermetures et la fonction setTimeout fonctionnent ensemble. Si vous avez déjà été intrigué par la raison pour laquelle votre boucle produit des résultats inattendus, vous êtes au bon endroit !

Concept clé

Avant de plonger dans le code, discutons de quelques concepts.

Programmation asynchrone :

JavaScript est monothread, ce qui signifie qu'il ne peut exécuter qu'un seul morceau de code à la fois. Cependant, il peut gérer des opérations asynchrones, permettant à certaines tâches de s'exécuter en arrière-plan pendant que le thread principal continue de s'exécuter.

Définir le délai d'attente

Cette fonction est utilisée pour exécuter un morceau de code après un délai spécifié. Cela prend deux paramètres : une fonction de rappel et un délai en millisecondes.

Fermetures

Une fermeture est une fonction qui conserve l'accès à sa portée lexicale, même lorsque la fonction est exécutée en dehors de cette portée. Ceci est crucial pour comprendre comment les variables sont accessibles dans les rappels asynchrones.

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

Avant de plonger dans les détails, prenez un moment pour regarder cet extrait de code. Essayez de deviner quel sera le résultat en fonction de votre compréhension actuelle. Cette approche permet non seulement de renforcer vos compétences JavaScript, mais rend également l'explication qui suit beaucoup plus significative

Pensez à la façon dont JavaScript traitera chaque ligne. Une fois que vous avez fait votre supposition, continuez à lire pour voir si vous avez bien compris !

Explication

Décomposons le code étape par étape :

Exécution de boucle : La boucle s'exécute cinq fois, en incrémentant i de 0 à 4.

setTimeout : pour chaque valeur de i, un setTimeout est programmé pour enregistrer i après i * 1 000 millisecondes.

Fermeture : au moment où les rappels setTimeout s'exécutent, la boucle est déjà terminée et i a une valeur finale de 5. Par conséquent, tous les rappels enregistreront 5.

Ce que tu pourrais sauf

0
1
2
3
4

Que se passe-t-il réellement

5
5
5
5
5

Cependant, ce n’est pas le résultat réel que vous verriez. La raison en est un comportement JavaScript courant lié à la portée de la variable i.

Dans le code fourni, la variable i est déclarée à l'aide de var, ce qui signifie qu'elle a une portée de fonction. Lorsque les fonctions setTimeout() sont exécutées, la boucle est déjà terminée et la valeur de i est 5. Par conséquent, toutes les fonctions setTimeout() enregistreront la valeur 5 dans la console, quel que soit le délai.

Résoudre le problème

Pour obtenir le résultat attendu de 0, 1, 2, 3, 4,

• vous pouvez utiliser une expression de fonction immédiatement invoquée (IIFE) pour créer une nouvelle portée pour chaque itération.
• Nous pouvons utiliser le mot-clé let au lieu de var.

Solution

Expression de fonction immédiatement invoquée

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

Maintenant, chaque setTimeout capturera la valeur actuelle de i et le résultat sera :

0
1
2
3
4

En utilisant le mot-clé Let

Le let mot-clé crée une variable de portée bloc, ce qui signifie que chaque itération de la boucle aura sa propre copie de la variable i, et les fonctions setTimeout() captureront la valeur correcte de i pour chaque itération.

Conclusion

Comprendre comment JavaScript gère les opérations et les fermetures asynchrones est crucial pour écrire du code efficace. L'extrait de code d'origine constitue un excellent exemple de la façon dont la fonction setTimeout interagit avec la variable de boucle i. En utilisant un IIFE, nous pouvons garantir que chaque délai d'attente enregistre la valeur correcte. Ainsi, la prochaine fois que vous rencontrerez une situation similaire, rappelez-vous le pouvoir des fermetures et comment elles peuvent vous aider à gérer le comportement asynchrone en JavaScript

Mission accomplie : décrypter le code !

J'espère que cette explication a non seulement clarifié le code, mais a également suscité une certaine curiosité pour une exploration plus approfondie. JavaScript regorge de surprises et d'outils puissants, et chaque élément que vous apprenez vous rapproche de sa maîtrise.

Merci d'avoir lu

J'espère que cette répartition vous a plu ! N'hésitez pas à partager vos réflexions, questions ou idées de sujets futurs dans les commentaires.

Joyeux codage

Si vous avez apprécié l'article et souhaitez montrer votre soutien, assurez-vous de :

Suivez-moi

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!