Qu'est-ce que l'asynchrone JavaScript

En tant que programmeurs débutants, nous rencontrons souvent des problèmes très simples, mais nous ne savons pas ce qui se passe. Par exemple, vous souhaitez appeler des données en arrière-plan et les afficher sur la première page, mais le résultat de sortie est toujours. vide. indéfini, aucune donnée n'est disponible. Quelle en est la raison ? Après avoir recherché des informations auprès de diverses sources, j'ai découvert que j'étais tombé dans le « gouffre » du JS asynchrone. C'est vrai, dans cet article nous partageons principalement avec vous ce qu'est le fonctionnement asynchrone de JS.

Nous entendons souvent les concepts de monothread, multithread, synchronisé et asynchrone, alors que sont exactement ces choses ?
Ensuite, commençons par les concepts ci-dessus

Compréhension de base du monothread, du multithread, synchronisé et asynchrone

Chaque programme en cours d'exécution (c'est-à-dire le processus) Il y a au moins un thread, appelé thread principal. Le thread principal est créé lors du démarrage du programme et est utilisé pour exécuter la fonction principale.

1. Un seul thread est un thread avec un seul thread principal. Le code s'exécute séquentiellement de haut en bas. Le thread principal est responsable de l'exécution de tout le code du programme (affichage et actualisation de l'interface utilisateur, requêtes réseau). , stockage local, etc.) [Un thread, je me sens un peu fatigué rien que de penser à tout ce que je dois faire]

2. Le multi-threading, comme son nom l'indique, est un programme avec plusieurs threads pouvant être créés par l'utilisateur. Plusieurs processus créés indépendamment par les utilisateurs sont des threads enfants par rapport au thread principal. Le thread enfant et le thread principal sont des unités d'exécution indépendantes et leurs exécutions respectives ne s'affectent pas, ils peuvent donc être exécutés simultanément.

Vous vous sentez un peu étourdi rien qu'en écoutant ces théories arides ? Par coïncidence, j'avais aussi le vertige quand je l'ai vu pour la première fois.

Dans le processus de recherche d'informations, j'ai trouvé une métaphore si vivante de la part des autres.

Par exemple, le monothreading signifie que vous allez à la cuisine pour cuisiner et cuisiner, et qu'une personne fait des allers-retours ; le multithreading signifie qu'il y a deux personnes, l'une qui cuisine seule et l'autre qui cuisine.

Cela devrait faciliter la compréhension, non ?

Et qu'est-ce que le synchrone et l'asynchrone ?

Utilisons un exemple de vie simple pour illustrer.

Vous appelez pour réserver un hôtel et demandez au personnel s'il y a une chambre. A ce moment-là, le personnel doit vérifier s'il y a une chambre avant de pouvoir vous répondre.

La synchronisation, c'est ne pas raccrocher le téléphone et attendre que le personnel vous dise s'il y a une chambre.
Asynchrone signifie raccrocher le téléphone, vous allez faire autre chose, comme manger et boire, et le personnel vous appellera après avoir trouvé l'information.

Voici donc notre sujet

Qu'est-ce que le fonctionnement asynchrone de JS ?

L'environnement d'exécution de JS est monothread, c'est-à-dire que le programme est exécuté séquentiellement et ne peut exécuter qu'une seule tâche à la fois. Si le programme veut continuer à s'exécuter, il doit attendre. pour que la tâche en cours soit exécutée, quel que soit le temps nécessaire à l'exécution de la tâche en cours (si le programme suivant se précipite, il sera vraiment inconfortable d'attendre).

Afin de résoudre le problème de blocage inconfortable des programmes suivants. JavaScript a un mode de traitement asynchrone, qui est en fait un traitement retardé.

Donnons un exemple pour illustrer.

var getUserInfo = function () {
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        return data;
      });
    }
    var data = getUserInfo();
    renderUserInfo(data)

La fonction getUserInfo est appelée. La récupération des données en arrière-plan peut prendre beaucoup de temps. Cela nécessite que renderUserInfo attende que les données soient récupérées avant de pouvoir s'exécuter. Heureusement, JS propose des opérations asynchrones lors de la récupération des données, vous n'avez pas besoin d'attendre que renderUserInfo récupère les données, mais de les exécuter directement.

Dans ce cas, dans quel ordre ces deux fonctions sont-elles exécutées ? Ne vous inquiétez pas, déboguons-le :

var getUserInfo = function () {
      console.log('aaa');
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        console.log('bbb');
        return data;
      });
    }
    var data = getUserInfo();
    console.log(data);
    console.log('ccc');
    renderUserInfo(data);

La sortie de l'exécution séquentielle était à l'origine pensée comme étant "aaa", "bbb", "ccc", n'est-ce pas ?

Cependant, les choses ne sont pas si simples. Jetons un coup d'œil à la sortie de la console :

Les résultats de sortie ne sont pas séquentiels.

C'est-à-dire que lorsque la fonction est exécutée pour getJSON pour récupérer les données, le programme n'attend pas qu'il récupère les données avant d'exécuter l'étape suivante, il saute l'étape de récupération des données. et exécute directement les données de sortie. Par conséquent, les données sont également vides.

C'est le mécanisme asynchrone de JS.

Le contenu ci-dessus est une explication détaillée de JavaScript asynchrone, j'espère qu'il pourra aider tout le monde.

Recommandations associées :

Méthode asynchrone JS pour implémenter Generator

Méthode de chargement asynchrone JS

Explication détaillée du chargeur de fichiers asynchrone js

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!