(Questions d'entretien courantes) Bases de js, de setTimeout au principe asynchrone de js

Ce sont des problèmes très basiques mais facilement négligés. Tout le monde sait comment utiliser cette méthode mais n'a pas étudié en profondeur le processus. Sans plus tarder, regardez le code ci-dessous

 <input type="text" value="a" name="input" onkeydown="alert(this.value)" />
<input type="text" value="a" name="input" onkeydown="var me=this;setTimeout(function(){alert(me.value)},0)" >

Pendant. Au premier appui, la valeur d'origine dans l'entrée apparaît, mais lors du deuxième appui, la valeur mise à jour apparaît. Cela est dû à setTimeout. Bien que son délai soit réglé sur 0, il est presque instantané, mais il est déclenché. est toujours ajouté à la fin de la file d'attente d'exécution, mais dans ce processus asynchrone, le rendu est terminé. Lorsque la fonction de rappel est exécutée, la sortie est déjà la valeur mise à jour. Un autre problème ici est le problème des différents objets indiqués par ceci à l'intérieur et à l'extérieur de différentes fonctions. Lorsqu'il y a une fonction dans la fonction, faites plus attention à cela. Il est facile de faire des erreurs.

Ensuite, js js est monothread. Il est concevable que s'il n'y a pas de multi-thread, tout le programme sera bloqué. Heureusement, le navigateur est multi-thread et le navigateur rend js asynchrone. attributs : js est un langage monothread. Le navigateur n'attribue qu'un seul thread principal à js pour exécuter des tâches (fonctions), mais une seule tâche peut être exécutée à la fois. Ces tâches forment une file d'attente de tâches en attente d'exécution, mais certaines. tâches sur le front-end Certaines tâches prennent beaucoup de temps, comme les requêtes réseau, les minuteries et la surveillance des événements. Si elles sont mises en file d'attente pour attendre leur exécution comme d'autres tâches, l'efficacité de l'exécution sera très faible et entraînera même le blocage de la page. . Par conséquent, le navigateur a ouvert des threads supplémentaires pour ces tâches chronophages, notamment les threads de requête http, les déclencheurs de synchronisation du navigateur et les threads de déclenchement d'événements du navigateur. Ces tâches sont asynchrones.

Le navigateur ouvre un thread séparé pour les tâches asynchrones telles que les requêtes réseau. La question est donc : comment le thread principal sait-il une fois ces tâches asynchrones terminées ? La réponse est la fonction de rappel. L'ensemble du programme est piloté par les événements. Chaque événement sera lié à une fonction de rappel correspondante. Par exemple, il y a un morceau de code qui définit une minuterie

setTimeout(function(){
    console.log(time is out);
}，500）;

lorsque ceci. Le code est exécuté, le navigateur effectue des opérations de synchronisation de manière asynchrone. Lorsque 500 ms arrivent, un événement de synchronisation sera déclenché. À ce moment, la fonction de rappel sera placée dans la file d'attente des tâches. Tout le programme est motivé par de tels événements.
Ainsi, js a toujours été monothread, et le navigateur est la clé pour réaliser un travail asynchrone.

Ce qui suit est reproduit à partir d'Internet :

js a fait un travail, ce qui consiste à récupérer les données de la file d'attente des tâches. Extrayez la tâche et placez-la dans le thread principal pour exécution. Apprenons ci-dessous une compréhension plus approfondie.

L'image vient du discours de Philip Roberts "Au secours, je suis coincé dans une boucle d'événements" est très profonde !
Mappons le concept que nous venons d'apprendre à l'image. Les threads que le navigateur ouvre pour les tâches asynchrones mentionnées ci-dessus peuvent être collectivement compris comme des WebAPI. La file d'attente des tâches mentionnée ci-dessus est ce que nous appelons le thread principal. partie composée de lignes pointillées. Le tas et la pile forment ensemble le thread principal js. L'exécution des fonctions est réalisée en poussant et en faisant éclater la pile. Par exemple, il y a une fonction foo() dans l'image. la pile. Lors de l'exécution du corps de la fonction, il constate que les fonctions ci-dessus doivent encore être exécutées, il pousse donc ces fonctions dans la pile. Lorsque la fonction est exécutée, la fonction est retirée de la pile. Lorsque la pile est effacée, cela signifie qu'une tâche a été exécutée à ce moment-là, la tâche suivante sera recherchée dans la file d'attente de rappel et poussée dans la pile (ce processus de recherche est appelé boucle d'événement, car il boucle toujours pour savoir si. il y a une tâche dans la file d'attente des tâches. Il y a aussi des tâches).

Articles connexes :

Explication détaillée du chargeur de fichiers asynchrone js, explication détaillée du chargement asynchrone js

Comment implémenter une requête asynchrone dans JS natif pour implémenter Ajax

Vidéos associées :

Compréhension et application de JS#largeur et hauteur jQuery

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!