Cet article présente principalement le processus d'exécution de la fonction js de setTimeout. Les amis qui en ont besoin peuvent s'y référer
Pour être honnête, lorsque j'ai écrit cet article, je me suis senti un peu déprimé parce que j'étais choqué. Pourquoi ? Juste parce que j'aime déconner, j'ai vu par hasard cette fonction "simple" :
for (var i = 0; i < 5; i++) { setTimeout(function () { console.log(i) }, i * 1000); } console.log(i);
Quoi ? N'est-ce pas la méthode de mise en œuvre que j'ai vue il y a longtemps consistant à imprimer un 5, puis un 5, puis à imprimer un 5 toutes les secondes jusqu'à ce que 6 5 soient imprimés ? Alors voici la question, que dois-je faire si je veux imprimer 0, 1, 2, 3, 4, 5 en séquence ? En fait, je savais qu'il y avait ces deux méthodes avant : l'une est comme ceci :
function log(i){ setTimeout(function(){ console.log(i) },i*1000) }; for (var i = 0; i < 5; i++) { log(i) ; } console.log(i);
Une autre est comme ceci :
for(var i=0;i<5;i++){ (function(e){ setTimeout(function(){ console.log(e) },i*1000); })(i); }; console.log(i);
Je n'ai pas peur des blagues. Je ne comprenais pas à quoi servaient réellement ces deux fonctions avant cela, alors je me suis juste forcé à le faire. souvenez-vous-en comme ça. C'est bien de le modifier comme ça, mais ça ne marche pas maintenant, j'ai un trouble obsessionnel-compulsif ! Donc, je l'ai lentement analysé et j'ai découvert que le code ci-dessus peut être séparé en ceci : lorsque
i=0;
setTimeout(function(){ console.log(i) },0*1000);
i=1; est rempli ;
setTimeout(function(){ console.log(i) },1*1000);
Quand i=2; la condition est remplie
setTimeout(function(){ console.log(i) },2*1000);
i=3; =4; la condition est remplie ;
setTimeout(function(){ console.log(i) },3*1000);
Lorsque i=5, la condition n'est pas remplie, sortez de la boucle, puis exécutez console.log(i) après la boucle for, en imprimant 5 ; enfin, imprimez-en 5 toutes les secondes
setTimeout(function(){ console.log(i) },4*1000);
Expliquez-le=>
(function copy() { setTimeout(function() {console.log(4)}, 0); new Promise(function executor(resolve) { console.log(1); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(2); }).then(function() { console.log(5); }); console.log(3); })()
6. Le code continue de s'exécuter et la console est rencontrée à ce moment-là, log(3), sortie 3.
7. Après la sortie de 3, le code du premier script de macrotâche est exécuté. À ce moment, toutes les micro-tâches de la file d'attente commencent à être exécutées. La fonction de rappel then est poussée sur la pile puis extraite. À ce moment, 5
8 est affiché. À ce moment, toutes les micro-tâches sont terminées et le premier tour de la boucle se termine. Le deuxième tour de boucle commence à partir de la file d'attente des tâches de setTimeout. La fonction de rappel de setTimeout est poussée dans la pile puis ressorte. À ce moment, 4 est affiché.
Enfin, afin d'approfondir votre compréhension, voici un autre morceau de code :
Si le résultat de votre exécution est : golb1=>glob1_promise=>glob1_then=>timeout1 =>timeout1_promise =>timeout1_then=>prp_timeout=>time_timeout=>timeout1_timeout1,Peut-être que la file d'attente asynchrone est une introduction ! ~~Le code ci-dessus semble un peu compliqué. Il est peut-être préférable d'utiliser des asyns et d'attendre pour le transformer, mais c'est plus ou moins l'idée que j'ai obtenue de setTimeout
Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles connexes :
Comment implémenter le WeChat Jump Game à l'aide de Three.js
Introduction détaillée à l'implémentation http dans NODEJS
Comment implémenter la fonction de chat à l'aide de nodejs
Comment utiliser les fonctions avancées en JavaScript
Utilisation d'Angular5 Réaliser la pratique du rendu côté serveur
Comment réinitialiser l'état d'inactivité dans vuex
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!