Analyse approfondie du mécanisme d'exécution des événements dans JS

Cet article vous donnera une compréhension approfondie du mécanisme d'exécution d'événements en JavaScript en analysant la séquence d'impression d'un morceau de code. J'espère qu'il vous sera utile !

J'étais un peu confus à propos d'une question de test écrit il y a quelque temps. Aujourd'hui, nous allons analyser en profondeur le mécanisme d'exécution d'événements de JS. [Recommandations associées : Tutoriel d'apprentissage Javascript]

Regardez d'abord un morceau de code

Les amis peuvent essayer d'écrire l'ordre d'impression

Fil unique

JS Principalement En tant que langage de script de navigateur, l'objectif principal de Js est de faire fonctionner le DOM, qui détermine que JS doit être monothread si JScode> est comme Java. Il est également multithread. Si deux threads exploitent le DOM en même temps, comment le navigateur doit-il l'exécuter ? <code>JS主要作为浏览器的脚本语言，Js的主要用途是操作DOM，这就决定了JS必须是单线程，如果JS如Java一样是多线程，如果两个线程同时操作DOM，那么浏览器应该怎么执行呢？

JS的发布其实是为了蹭Java的热度，其中编写这门语言的时间并不久，所以这也就是为什么JS是单线程的原因

JS执行机制

JS既然是单线程，那么必然会对任务进行一个排序。所有的任务都将按照一个规则执行下去。

• 同步任务

• 异步任务

同步任务和异步任务进入执行栈中，JS会先判断任务的类型

• 是同步任务，直接进入主线程

• 是异步任务，进入Event Table中，注册回调函数Event Queue

• 同步任务全部执行结束，JS会Event Queue中读取函数执行

• 这个过程会反复执行，直到全部任务执行结束。这就是我们常说的事件循环

JS如何判断执行栈为空

emmmm，我不知道。。。。JS应该有一套自己独有的逻辑去判断执行栈是否为空。

异步任务

异步的任务执行顺序为：宏任务——>微任务

异步任务可分为

• 宏任务

• 微任务

常见的宏任务

• I/0

• setTimeout

• setInterval

常见的微任务

• Promise

• .then

• .catch

答案

vite 之前配置的一个插件，版本有些问题，不要管这个红色报警

分析

• 开始了 是一个同步任务，最先进入执行栈中

• 执行task()函数， a是一个同步任务，进入执行栈中

• async/await 是异步转同步的过程，第一行代码会同步执行，以下的代码会异步。b作为一个同步任务进入执行栈中

• a end成为了异步任务的微任务，进入执行栈中，

目前为止，同步任务队列依次是 开始了, a, b

目前为止，异步任务队列依次是 宏任务: setTimeout 微任务：a end

如果没有后续代码，打印顺序如下

那么问题来了，不是说宏任务会比微任务提前执行吗，为什么setTimeout打印在a end之后呢？

看这张图

setTimeout 作为了宏任务进入了任务队列。所以造成了这种原因

通俗来讲：

async await 导致了微任务的产生，但是这个微任务所属于当前的宏任务。所以会先执行a end，执行完毕判断当前宏任务结束。执行下一个宏任务，打印出了setTimeout

继续走流程

• c 由于Promise的转化，变为同步任务进入到任务队列中

• c end 作为Promise衍生的微任务进入任务队列

• d

  La sortie de JS vise en fait à profiter de la popularité de Java. Le langage a été écrit il n'y a pas longtemps, c'est pourquoi JS est monothread🎜

  🎜Mécanisme d'exécution JS🎜🎜🎜Étant donné que JS est monothread, les tâches doivent être triées. Toutes les tâches seront exécutées selon une règle. 🎜

  • 🎜Tâches synchrones🎜
  • 🎜Tâches asynchrones🎜

  🎜🎜🎜Les tâches synchrones et asynchrones entrent dans la pile d'exécution, JS déterminera d'abord le type de tâche🎜

  🎜 est une tâche synchrone, entrez directement le thread principal🎜

• 🎜 est une tâche asynchrone, entrez la Event Table et enregistrez la fonction de rappel Event File d'attente🎜
• 🎜Une fois toutes les tâches de synchronisation exécutées, JS lira la fonction de Event Queue et l'exécutera🎜
• 🎜Ce processus sera exécuté à plusieurs reprises jusqu'à ce que toutes les tâches soient exécutées. C'est ce que nous appelons souvent boucle d'événements🎜

🎜Comment JS détermine-t-il que la pile d'exécution est vide🎜 h4>🎜 emmmm, je ne sais pas. . . . JS doit avoir sa propre logique unique pour déterminer si la pile d'exécution est vide. 🎜

🎜Tâches asynchrones🎜🎜🎜La séquence d'exécution des tâches asynchrones est la suivante : macro tâches -> micro tâches 🎜🎜Les tâches asynchrones peuvent être divisées en 🎜

• 🎜 macros Tâches 🎜
• 🎜Micro-tâches🎜

🎜Macro-tâches courantes🎜

• 🎜 I/ 0🎜
• 🎜setTimeout🎜
• 🎜setInterval🎜

🎜Microtâches courantes🎜

• 🎜Promesse🎜
• 🎜.then🎜
• 🎜.catch🎜

Réponse🎜🎜vite Il y a un plug-in configuré auparavant. Il y a quelques problèmes avec la version Ignorez cette alarme rouge🎜🎜🎜

Analyse🎜

• 🎜Démarré est une tâche synchrone et est la première à entrer dans la pile d'exécution 🎜
• 🎜 exécute la fonction task() a. tâche synchrone et entre en exécution. 🎜
• 🎜async/await dans la pile est le processus d'asynchrone à synchrone. La première ligne de code sera exécutée de manière synchrone et le code suivant sera asynchrone. b entre dans la pile d'exécution en tant que tâche synchrone 🎜
• 🎜a end devient une microtâche de la tâche asynchrone et entre dans la pile d'exécution, 🎜 li>

🎜🎜Jusqu'à présent, la file d'attente des tâches de synchronisation est Démarrée, a, b🎜🎜🎜🎜Jusqu'à présent, La la file d'attente des tâches asynchrones est une macro-tâche en séquence : setTimeout Micro-tâche : une fin🎜🎜

🎜S'il n'y a pas de code suivant , la séquence d'impression comme suit🎜🎜🎜🎜 🎜Alors la question est : cela ne signifie-t-il pas que les macro-tâches seront exécutées plus tôt que les micro-tâches ? Pourquoi setTimeout est-il imprimé après une fin ? 🎜🎜Regardez cette photo🎜🎜🎜🎜setTimeout entre dans la file d'attente des tâches en tant que tâche macro. La raison est donc 🎜🎜En termes simples : 🎜🎜async wait conduit à la génération de micro-tâches, mais cette micro-tâche appartient à la macro-tâche actuelle. Par conséquent, une fin sera exécutée en premier, et après l'exécution, il sera jugé que la macro-tâche en cours est terminée. Exécutez la tâche macro suivante et imprimez setTimeout🎜

🎜Continuez à suivre le processus🎜

• 🎜 c En raison de la conversion de Promise, elle devient une tâche synchrone et entre dans la file d'attente des tâches🎜
• 🎜c end Entre dans la file d'attente des tâches en tant que micro-tâche dérivée from Promise🎜
• 🎜d entre dans la file d'attente des tâches en tant que tâche de synchronisation🎜

Jusqu'à présent, file d'attente des tâches synchrone nous file d'attente des tâches

• a fin micro Tâche

• c end Micro task

• setTimeout Macro task

• Donc, l'ordre d'impression est le suivant

Postscript

Ma propre compréhension du mécanisme d'exécution JS est peut-être incorrecte, j'espère que vous tout le patron l'a souligné.

• 【Recommandation de didacticiel vidéo connexe :

  front-end Web

  】

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!