Comment implémenter un rappel io asynchrone monothread à l'aide de JS

Cet article analyse principalement les caractéristiques des rappels io asynchrones monothread en JavaScript. J'espère que le contenu que nous avons compilé pourra vous aider.

La plupart de nos premiers contacts avec javascript ont commencé avec des scripts js en html. Cependant, nous utilisons ce langage apparemment simple depuis plusieurs années sans comprendre certains de ses principes et mécanismes. >

Au moins JavaScript utilise divers rappels d'événements lors de l'exploitation du DOM, tels que les clics sur les boutons, les liens, le passage de la souris, l'acquisition du focus, etc.

Dans ce processus, nous lions une fonction de rappel d'événement sur le dom tel que onclick="doCheck()". Ce processus consiste à enregistrer un événement de clic pour l'élément dom et à lier une fonction de rappel d'événement doCheck().

Lorsque l'on clique sur la souris Lorsque cet élément est utilisé, un l'événement est déclenché et la fonction de liaison d'événement est immédiatement exécutée et renvoyée

Plus tard, lorsque je suis entré en contact avec jquery, un grand nombre de syntaxes jquery telles que

$("#id").click(function(){
alert('点击事件');
});

ont été écrites. De plus en plus, je semble y être habitué, mais vous avez remarqué que le sélecteur précédent sélectionne et filtre uniquement les nœuds DOM, et le clic suivant est un enregistrement d'événement, et la fonction(){} à l'intérieur est en fait un paramètre, un événement liaison Les paramètres de la fonction nécessitent que vous soyez familier avec la syntaxe de JavaScript

La fonction est un objet en JavaScript L'objet peut faire référence à tout dans le monde, donc l'objet peut contenir de nombreux attributs, méthodes, etc.

Puisqu'il s'agit d'un objet, il peut être passé en paramètre. Ce type de fonction est appelé fonction d'ordre supérieur.

Et ce type de fonction n'a pas de fonction définie. nom, n'est-ce pas ? Bien sûr, vous pouvez lui donner un nom puis mettre le nom. C'est la même chose une fois passé, mais cela n'a aucun sens car l'objet fonction ici est en fait un paramètre formel, nous avons donc l'habitude de ne pas donner ce genre de nom. fonction un nom. C'est ce qu'on appelle souvent une fonction anonyme.

Suivez le $("#id").click ci-dessus. En parlant de cela, lorsque l'événement click est déclenché, la fonction de liaison d'événement doit être exécutée. Cela a le même effet que la méthode onclick donnée directement sur le dom ci-dessus.

Supposons que vous naviguiez S'il y a plusieurs threads dans le serveur pour faire fonctionner le script, pouvez-vous imaginer le chaos que le thread 1 était sur le point de modifier ? valeur de l'élément A, mais de manière inattendue, le thread 2 avait déjà supprimé le nœud de l'élément A de l'arborescence dom. À ce moment, le thread 1 échoue et une erreur est signalée. Cette situation n'est pas mauvaise. Soit le navigateur ne la maintient pas. la cohérence des données sur plusieurs threads, ou l'ingénieur front-end les maintient lui-même, donc... le navigateur n'a qu'un seul thread pour faire fonctionner le DOM, cela évite bien des problèmes inutiles.

Pensez-vous qu'il y a encore une chance d'alerte (« pop-up ») après 300 millisecondes ?

setTimeout(function(){
alert('弹出');
},300);

while(true){
	........
}

Non, il n'y aura jamais de chance, attendez 300 millisecondes, c'est juste pour tromper vos sentiments. Le navigateur exécute le script en mode monothread.

Une fois que le thread est en mode boucle infinie et exécute l'instruction while, votre setTimeout n'aura plus aucun effet.

Ensuite, nous sommes entrés dans le monde. de node.js, qui conserve complètement les caractéristiques de JavaScript dans le navigateur, rappel asynchrone monothread, et c'est précisément à cause de cette fonctionnalité que c'est ce qu'il est si node.js est un langage synchrone, même si tout npm. les packages sont des extensions C++ (la vitesse est assez rapide), quelle que soit votre vitesse, vous ne pouvez pas battre la vitesse de traitement du langage C, n'est-ce pas ? Alors node.js a peut-être été méprisé par PHP avant sa naissance

.

C'est justement grâce à son rappel IO asynchrone qu'il peut améliorer son efficacité. Cela me rappelle la comparaison entre un fast-food de l'école précédente et la cafétéria de l'école :

A la cafétéria, tout. les élèves se sont alignés près de la fenêtre avec des assiettes. Ils ont formé une file, et la petite sœur qui préparait le riz l'a rempli un à un, puis a apporté le riz un à un et est partie. C'est le résultat de la synchronisation.

Le fast-food de l'école a également des étudiants qui font la queue pour commander, mais après avoir commandé, ils prennent la nourriture. Votre téléavertisseur peut alors partir et trouver une place. De cette façon, le serveur peut fournir des services à de nombreuses personnes dans une unité de temps. , et les étudiants qui ont commandé des repas peuvent trouver une place et faire d'autres choses par eux-mêmes, au lieu de rester à la fenêtre en attendant leur repas, le serveur appuiera sur le code en fonction du numéro de commande. cette fois, le téléavertisseur sur votre table sonnera et vous pourrez simplement aller chercher le repas. Il s'agit d'un traitement asynchrone. La sonnerie du téléavertisseur est l'événement déclencheur

Un seul thread peut réduire le gaspillage de ressources et. difficultés de maintenance causées par le changement de statut entre plusieurs threads. Bien sûr, il existe également des packages tiers spécialisés pour prendre en charge les scénarios multicœurs et multithreads.

Ci-dessus, je l'ai compilé pour tout le monde. . J’espère que cela sera utile à tout le monde à l’avenir.

Articles associés :

Interprétation détaillée de l'utilisation de la navigation de réaction-navigation

Interprétation détaillée de la fonction Function en javascript (tutoriel détaillé )

Comment implémenter une visualisation personnalisée à l'aide d'AngularJS2 intégré à D3.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!