Analyse détaillée du mécanisme de fonctionnement en js (exemple d'analyse)

Ce que cet article vous apporte, c'est une analyse détaillée du mécanisme de fonctionnement en js (exemple d'analyse). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Introduction

Cet article présente le mécanisme de fonctionnement de JavaScript. Cette partie est relativement abstraite :

console.log(1);
setTimeout(function(){
console.log(3);
},0);
console.log(2);
请问数字打印顺序是什么？

Cette question peut paraître simple, mais si vous ne comprenez pas comment fonctionne JavaScript, il est facile de se tromper de réponse. La réponse à la question est de sortir 1 2 3 dans l'ordre. Si vous avez des doutes, vous trouverez une explication détaillée ci-dessous.

2. Comprendre le concept de single-threading en JS

Une fonctionnalité majeure du langage JavaScript est le single-threading, c'est-à-dire,

Une seule chose peut être faite à la fois. en même temps . Alors pourquoi JavaScript ne peut-il pas avoir plusieurs threads ? Cela peut améliorer l’efficacité. Le fil de discussion unique de JavaScript 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 ?
Ainsi, afin d'éviter toute complexité, JavaScript est monothread depuis sa naissance. Cela est devenu la fonctionnalité principale de ce langage et ne changera pas à l'avenir.

3. Comprendre la file d'attente des tâches (file d'attente des messages)

Un seul thread signifie que toutes les tâches doivent être mises en file d'attente et que la tâche précédente sera terminée avant l'exécution de la tâche suivante. Si la tâche précédente prend beaucoup de temps, la tâche suivante devra attendre. Les concepteurs du langage JavaScript ont réalisé ce problème et ont divisé toutes les tâches en deux types,

l'une est une tâche synchrone (synchrone) et l'autre est une tâche asynchrone (asynchrone) . Les tâches synchrones font référence aux tâches mises en file d'attente pour exécution sur le thread principal. La tâche suivante ne peut être exécutée qu'après l'exécution de la tâche précédente ; les tâches asynchrones font référence aux tâches qui n'entrent pas dans le thread principal mais entrent dans la « file d'attente des tâches ». Ce n'est que lorsque la « file d'attente des tâches » informe le thread principal qu'une tâche asynchrone peut être exécutée que la tâche entrera dans le thread principal pour exécution. Ensuite, nous illustrons la différence entre les tâches synchrones et les tâches asynchrones à travers deux exemples :

console.log("A");
while(true){ }
console.log("B");
请问最后的输出结果是什么？

Si votre réponse est A, félicitations pour la bonne réponse, car il s'agit d'une tâche synchrone et le programme est exécuté de haut en bas. vers le bas. Lorsque vous rencontrez une boucle infinie de while(), les instructions suivantes ne peuvent pas être exécutées.

console.log("A");
setTimeout(function(){
console.log("B");
},0);
while(true){}
请问最后的输出结果是什么？

Si votre réponse est A, félicitations, vous avez maintenant une compréhension approximative du mécanisme de fonctionnement de js ! Le setTimeout() dans la question est une tâche asynchrone.

Aucune tâche asynchrone ne sera exécutée tant que toutes les tâches synchrones ne seront pas exécutées Cela sera expliqué en détail ci-dessous.

4. Comprendre la boucle d'événements

Le mécanisme de fonctionnement de l'exécution asynchrone est le suivant :

1. Toutes les tâches synchrones sont sur le thread principal Execution, formant une pile de contexte d'exécution.

2. En plus du fil de discussion principal, il existe également une "file d'attente des tâches". Tant que la tâche asynchrone a des résultats en cours d'exécution, un événement est placé dans la « file d'attente des tâches ».

3. Une fois que toutes les tâches de synchronisation de la « pile d'exécution » ont été exécutées, le système lira la « file d'attente des tâches » pour voir quels événements s'y trouvent. Les tâches asynchrones correspondantes mettent fin à l'état d'attente, entrent dans la pile d'exécution et démarrent l'exécution.

4. Le fil principal ne cesse de répéter la troisième étape ci-dessus.

Le thread principal lit les événements de la "file d'attente des tâches". Ce processus est cyclique, donc l'ensemble du mécanisme de fonctionnement est également appelé Event Loop . Tant que le thread principal est vide, il lira la "file d'attente des tâches". C'est le mécanisme d'exécution de JavaScript. Ce processus se répétera encore et encore. L’image ci-dessous illustre bien ce point.

5. Quelles instructions seront placées dans la file d'attente des tâches asynchrones et le timing

De manière générale, il y a les quatre suivantes types d'instructions Placer dans la file d'attente des tâches asynchrones :

1. setTimeout et setlnterval

2. Événement DOM

3. dans ES6 Promise

4. Requête asynchrone Ajax

le code javascript s'exécute en deux étapes :

1. Pré-analyse --- définir toutes les fonctions à l'avance, déclarer toutes les variables à l'avance et attribuer des valeurs aux variables à l'avance

2. Exécution- --execute de haut en bas (Selon le mécanisme de fonctionnement js)

Quant au timing de mise dans la file d'attente des tâches asynchrones, nous l'expliquerons en détail à travers l'exemple setTimeout et l'Ajax exemple :

例题1
for (var i = 0; i <p>for循环一次碰到一个 setTimeout()，<strong>并不是马上把setTimeout()拿到异步队列中，而要等到一秒后，才将其放到任务队列里面</strong>，一旦"执行栈"中的所有同步任务执行完毕（即for循环结束，此时i已经为5），系统就会读取已经存放"任务队列"的setTimeout()（有五个），于是答案是输出5个5。</p><p>上面也提到，<strong>在到达指定时间时，定时器就会将相应回调函数插入“任务队列”尾部。这就是“定时器（timer）”功能</strong>。</p><p><strong>关于定时器的重要补充</strong>：</p><p>定时器包括setTimeout与 setInterval 两个方法。它们的第二个参数是指定其回调函数推迟/每隔多少毫秒数后执行。</p><p>对于第二个参数有以下需要注意的地方：</p><p>当第二个参数缺省时，默认为 0；</p><p>当指定的值小于 4 毫秒，则增加到 4ms(4ms 是 HTML5 标准指定的，对于 2010 年及之前的浏览器则是 10ms);也就是说至少需要4毫秒，该setTimeout()拿到任务队列中。</p><pre class="brush:php;toolbar:false">例题2
$.ajax({
url：“xxxxx",
success:function (result){
console.log("a")
   }
})
setTimeout(function (){
console.log("b")
},100)
setTimeout(function (){
console.log("c")
})
console.log("d");

ajax加载完成时才会放入异步队列，至于这段时间不确定，所有有两种情况：①大于100ms,最后的结果是 d c b a ;②小于100ms,最后的结果便是d c a b。

六、题外话

如果要输出0~4，上面例题应该如何修改？

1. 将var变为let

for (let i = 0; i <p>2.加个立即执行函数</p><pre class="brush:php;toolbar:false">for (var i = 0; i <p>3.也可以通过这样加闭包</p><pre class="brush:php;toolbar:false">for(var i = 1;i 

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!