Qu'est-ce que Javascript asynchrone ? A quoi ça sert ?
Le contenu de cet article porte sur ce qu'est le javascript asynchrone ? A quoi ça sert ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Qu'est-ce que js asynchrone ?
Nous savons que JavaScript est monothread, ce qui est lié à son objectif. En tant que langage de script de navigateur, l'objectif principal de JavaScript est d'interagir avec les utilisateurs et de manipuler le DOM. Cela détermine qu'il ne peut être qu'un seul thread, sinon cela entraînera des problèmes de synchronisation très complexes. Par exemple, supposons que JavaScript ait deux threads en même temps. Un thread ajoute du contenu à un certain nœud DOM et l'autre thread supprime le nœud. Dans ce cas, quel thread le navigateur doit-il utiliser ?
Le soi-disant « fil unique » signifie qu'une seule tâche peut être accomplie à la fois. S'il y a plusieurs tâches, elles doivent être mises en file d'attente. Une fois la tâche précédente terminée, la tâche suivante sera exécutée, et ainsi de suite.
L'avantage de ce mode est qu'il est relativement simple à mettre en œuvre et l'environnement d'exécution est relativement simple ; l'inconvénient est que tant qu'une tâche prend beaucoup de temps, les tâches suivantes doivent être mises en file d'attente, ce qui retardera l'exécution. de l'ensemble du programme. L'absence de réponse courante du navigateur (mort suspendue) est souvent causée par un certain morceau de code Javascript exécuté pendant une longue période (comme une boucle infinie), ce qui bloque la page entière à cet endroit et empêche d'autres tâches d'être effectuées.
La requête synchrone d'Ajax entraînera le blocage du navigateur car elle verrouillera l'interface utilisateur du navigateur (boutons, menus, barres de défilement, etc.) et bloquera toutes les interactions de l'utilisateur. Ajax dans jquery a une telle requête synchrone. La fonction doit être utilisée avec prudence. , surtout lorsque la quantité de données demandées est importante, évitez d'utiliser des requêtes synchrones.
Citez quelques exemples pour vous sentir asynchrone
L'interface de fond utilise easy-mock, l'adresse officielle : https://easy-mock.com/
ajax utilise axios, le code de base est le suivant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>javascript异步</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button>点击</button>
<script>
{
let myData = null
//ajax请求
function ajax() {
axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
.then(data => {
console.log("ajax返回成功");// handle success
myData = data.data
console.log(myData);
})
.catch(error => {
// console.log(error); // handle error
console.log("ajax返回失败");
})
}
}
</script>
</body>
</html>Voyons l'effet en ajoutant quelques js,
Asynchronous-Timer
console.log(myData);
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);Sortie, il ne devrait y avoir aucun suspense
//null //null //定时器
Séquence d'exécution :
Exécutez le premier console.log(myData);
Ensuite, rencontrez le minuteur et suspendez le minuteur (c'est-à-dire suspendez le minuteur)
Continuez à exécuter le deuxième console.log(myData);
Il n'y a pas de code js exécutable, revenez en arrière et continuez à exécuter la tâche suspendue
Continuez à regarder la châtaigne suivante
Asynchrone-ajax
console.log(myData); ajax() console.log(myData);
Regardez la sortie , toujours Pas de suspense
//null
//null
//ajax返回成功
//{success: true, data: {…}}(这是接口返回的数据，我们不必关心返回的具体内容，只要知道返回了就好，陌上寒注)La séquence d'exécution est fondamentalement similaire au minuteur ci-dessus, je n'entrerai donc pas dans les détails ici.
Fusionnez les deux châtaignes, jetons un œil à la sortie de
console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);,
//null
//null
//ajax返回成功
//{success: true, data: {…}}
//定时器Avez-vous trouvé le problème ? Lorsque deux fonctions asynchrones se rencontrent, laquelle sera exécutée en premier ? Celui qui court le plus vite sera exécuté en premier ?
On peut dire qu'en fait, cela conduit à un autre point de connaissance,
File d'attente des tâches et boucle d'événements
Les deux console.log(myData) sont exécutés de manière synchrone, ils le sont ; tous deux exécutés sur le thread principal de js,
il y a une file d'attente de tâches en dehors du thread principal et la file d'attente de tâches stocke le contenu qui doit être exécuté de manière asynchrone
Lorsque le thread principal termine son exécution, les tâches dans la file d'attente des tâches sera exécuté. (Répétez continuellement l'analyse) jusqu'à ce que la file d'attente des tâches soit effacée
Observez ce code
console.log(1);
setTimeout(function () {
console.log(2);
}, 1000);
console.log(3);Sortie : 1, 3, 2, il n'y a rien à expliquer
Regardez sur un autre morceau de code
setTimeout(function(){console.log(1);}, 0);
console.log(2);Sortie : 2, 1, pourquoi ?
console.log(2); est exécuté en premier dans le thread principal,
setTimeout(function(){console.log(1);}, 0); est placé dans la file d'attente des tâches,
uniquement Le contenu de la file d'attente des tâches ne sera exécuté que lorsque le thread principal aura fini de s'exécuter
Pourquoi devons-nous analyser en continu le contenu de la file d'attente des tâches une fois la tâche du thread principal terminée ?
Regarder ce code vous aidera à comprendre
console.log(myData);
ajax()
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);
const btn = document.querySelector('button')
btn.onclick = () => {
console.log("点击了");
}Nous avons ajouté un événement de clic au bouton du bouton et avons continué à cliquer sur le bouton pendant que le navigateur était actualisé (bien sûr, cliquez manuellement)
Regardez le résultat :
//null
//null
//(10次输出)点击了
//ajax返回成功
//{success: true, data: {…}}
//定时器
//点击了Est-ce que cela permet de comprendre pourquoi le thread principal doit analyser la file d'attente des tâches en boucle ?
Chaque tour de la boucle d'événements est appelé un tick (pensez-vous à nextTick dans vue ?)
Lorsque l'interaction de l'utilisateur se produit (événement de clic de souris, événement de défilement de page, événement de changement de taille de fenêtre, etc.), ajax, Les minuteries, les minuteries, etc. ajouteront des événements à la file d'attente des tâches dans la boucle d'événements, puis attendront l'exécution
Quels sont les scénarios pour le front-end asynchrone ?
Tâches planifiées : setTimeout, setInverval
Requêtes réseau : requêtes ajax, chargement dynamique des images img
-
Liaison d'événement ou événement DOM, tel qu'un événement de clic, je ne sais pas quand il clique, mais avant de cliquer, que dois-je faire. Lors de l'enregistrement d'un type d'événement avec addEventListener, le navigateur aura un module séparé pour recevoir cette chose. Lorsque l'événement est déclenché, un certain module du navigateur lancera la fonction correspondante dans la file d'attente asynchrone Si maintenant Si la pile d'exécution est. vide, la fonction sera exécutée directement.
Promesse dans ES6
Quand l'asynchrone est-il requis :
Quand une attente peut survenir Situation
Lorsque le programme ne peut pas être bloqué comme une alerte pendant le processus d'attente
-
Par conséquent, toutes les "situations d'attente" doivent être asynchrones
En une phrase, vous devez utiliser asynchrone lorsque vous devez attendre mais que vous ne pouvez pas bloquer le programme
Asynchrone et Parallèle
Ne confondez pas asynchrone et parallèle,
Asynchrone est monothread, parallèle est multi-thread
Asynchrone : Les tâches du thread principal sont synchronisées Seulement après le l'exécution est terminée, les tâches asynchrones de la file d'attente des tâches seront exécutées séquentiellement
Parallèle : deux ou plusieurs chaînes d'événements sont exécutées alternativement au fil du temps, de sorte qu'à partir d'un niveau supérieur, elles semblent s'exécuter en même temps (bien que seules les poignées un événement à tout moment)
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment implémenter la programmation asynchrone avec les fonctions C++ ?
Apr 27, 2024 pm 09:09 PM
Résumé : La programmation asynchrone en C++ permet d'effectuer plusieurs tâches sans attendre des opérations fastidieuses. Utilisez des pointeurs de fonction pour créer des pointeurs vers des fonctions. La fonction de rappel est appelée lorsque l'opération asynchrone est terminée. Les bibliothèques telles que boost::asio fournissent un support de programmation asynchrone. Le cas pratique montre comment utiliser les pointeurs de fonction et boost::asio pour implémenter des requêtes réseau asynchrones.
Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP
Jan 05, 2024 pm 06:08 PM
Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest
Problèmes courants et solutions dans la programmation asynchrone dans le framework Java
Jun 04, 2024 pm 05:09 PM
3 problèmes et solutions courants dans la programmation asynchrone dans les frameworks Java : Callback Hell : utilisez Promise ou CompletableFuture pour gérer les rappels dans un style plus intuitif. Conflit de ressources : utilisez des primitives de synchronisation (telles que des verrous) pour protéger les ressources partagées et envisagez d'utiliser des collections thread-safe (telles que ConcurrentHashMap). Exceptions non gérées : gérez explicitement les exceptions dans les tâches et utilisez un cadre de gestion des exceptions (tel que CompletableFuture.exceptionally()) pour gérer les exceptions.
Comment le framework Golang gère-t-il la concurrence et la programmation asynchrone ?
Jun 02, 2024 pm 07:49 PM
Le framework Go utilise les fonctionnalités de concurrence et asynchrones de Go pour fournir un mécanisme permettant de gérer efficacement les tâches simultanées et asynchrones : 1. La concurrence est obtenue via Goroutine, permettant d'exécuter plusieurs tâches en même temps. 2. La programmation asynchrone est implémentée via des canaux, qui peut être exécuté sans bloquer le thread principal;3. Convient aux scénarios pratiques, tels que le traitement simultané des requêtes HTTP, l'acquisition asynchrone des données de base de données, etc.
Comment obtenir facilement le code d'état HTTP en JavaScript
Jan 05, 2024 pm 01:37 PM
Introduction à la méthode d'obtention du code d'état HTTP en JavaScript : Dans le développement front-end, nous devons souvent gérer l'interaction avec l'interface back-end, et le code d'état HTTP en est une partie très importante. Comprendre et obtenir les codes d'état HTTP nous aide à mieux gérer les données renvoyées par l'interface. Cet article explique comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournit des exemples de code spécifiques. 1. Qu'est-ce que le code d'état HTTP ? Le code d'état HTTP signifie que lorsque le navigateur lance une requête au serveur, le service
Programmation asynchrone Python : un moyen d'obtenir une concurrence efficace dans le code asynchrone
Feb 26, 2024 am 10:00 AM
1. Pourquoi utiliser la programmation asynchrone ? La programmation traditionnelle utilise le blocage des E/S, ce qui signifie que le programme attend la fin d'une opération avant de continuer. Cela peut bien fonctionner pour une seule tâche, mais peut entraîner un ralentissement du programme lors du traitement d'un grand nombre de tâches. La programmation asynchrone brise les limitations des E/S bloquantes traditionnelles et utilise des E/S non bloquantes, ce qui signifie que le programme peut distribuer des tâches à différents threads ou boucles d'événements pour exécution sans attendre la fin de la tâche. Cela permet au programme de gérer plusieurs tâches simultanément, améliorant ainsi ses performances et son efficacité. 2. La base de la programmation asynchrone Python La base de la programmation asynchrone Python est constituée de coroutines et de boucles d'événements. Les coroutines sont des fonctions qui permettent à une fonction de basculer entre la suspension et la reprise. La boucle événementielle est responsable de la planification
Quels sont les avantages et les inconvénients de la programmation asynchrone en PHP ?
May 06, 2024 pm 10:00 PM
Les avantages de la programmation asynchrone en PHP incluent un débit plus élevé, une latence plus faible, une meilleure utilisation des ressources et une évolutivité. Les inconvénients incluent la complexité, la difficulté de débogage et la prise en charge limitée des bibliothèques. Dans le cas réel, ReactPHP est utilisé pour gérer les connexions WebSocket, démontrant l'application pratique de la programmation asynchrone.
Programmation asynchrone Python : révélez l'essence de la programmation asynchrone et optimisez les performances du code
Feb 26, 2024 am 11:20 AM
La programmation asynchrone, en anglais Asynchronous Programming, signifie que certaines tâches du programme peuvent être exécutées simultanément sans attendre la fin d'autres tâches, améliorant ainsi l'efficacité opérationnelle globale du programme. En Python, le module asyncio est le principal outil d'implémentation de la programmation asynchrone. Il fournit des coroutines, des boucles d'événements et d'autres composants requis pour la programmation asynchrone. Coroutine : la coroutine est une fonction spéciale qui peut être suspendue puis reprise, tout comme un thread, mais une coroutine est plus légère et consomme moins de mémoire qu'un thread. La coroutine est déclarée avec le mot-clé async et l'exécution est suspendue au mot-clé wait. Boucle d'événements : la boucle d'événements (EventLoop) est la clé de la programmation asynchrone
