La dernière expérience d'entretien frontal - autour de setTimeout

Cet article partage principalement avec vous une expérience d'entretien front-end centrée sur setTimeout. Il s'agit d'une question de test de développement front-end intéressante centrée sur setTimeout. Elle examine for loop et timersetTimeout(), JavaScript fermeture, fonction anonyme et Promise, etc. Vous pouvez faire des erreurs si vous ne faites pas attention. Venez voir si vous maîtrisez les connaissances ci-dessus .

Avant-propos

Le front-end, un domaine populaire ces dernières années, a une atmosphère particulièrement forte de création de problèmes. une interview folle récemment et rencontré Il y a beaucoup d'intervieweurs intéressants et de questions d'entretien intéressantes. Laissez-moi aider ce fauteur de troubles à les expliquer.

Les détails sont les suivants :

Ce qui suit est l'histoire d'un de mes amis, ce n'est vraiment pas moi.

for (var i = 0; i < 5; i++) {
 console.log(i);
}

"Xiaowei, dis-moi ce que ces lignes de code vont produire ?"

Quand l'intervieweur tape ceci dans Sublime A some lignes de code plus tard, j'étais un peu confus. Palourde? N'est-ce pas la boucle la plus simple ? Y a-t-il un piège ? J'y ai pensé. Cela semble être très similaire à la question de clôture que j'ai vue. L'intervieweur n'a-t-il pas fini de l'écrire ? C'est toxique.

"Il devrait sortir directement 0 à 4...", dis-je faiblement.

"Oui, ne soyez pas nerveux, il n'y a pas de piège dans cette question, je l'écris juste avec désinvolture."

(Excusez-moi ? Intervieweur, êtes-vous là pour être drôle ? Je j'ai peur ! )

"Alors qu'est-ce que tu regardes le résultat de ces lignes de code ?" setTimeout retardera l'exécution, donc lorsque console.log est exécuté, i est en fait devenu 5. Oui, c'est tout. Comment peut-il être si difficile pour moi de faire quelque chose d'aussi simple ?

« Il devrait commencer à produire un 5, puis à produire un 5 toutes les secondes, un total de 5 5 s. »

« Oui, comment devrait-il être modifié pour produire 0 à 4 » ?

for (var i = 0; i < 5; i++) {
 setTimeout(function() {
 console.log(i);
 }, 1000 * i);
}

Enfin c'est quelque chose que je connais, il suffit d'ajouter une fermeture et c'est résolu, c'est stable !

"Très bien, pouvez-vous me dire ce qui se passera si je supprime ce i ?"

for (var i = 0; i < 5; i++) {
 (function(i) {
 setTimeout(function() {
  console.log(i);
 }, i * 1000);
 })(i);
}

"Dans ce cas, il n'y a pas de

référence

interne à i, et elle deviendra en fait la sortie 5."

"Très bien, alors je vais la changer pour vous. " , quelle sera la sortie "

for (var i = 0; i < 5; i++) {
 (function() {
 setTimeout(function() {
  console.log(i);
 }, i * 1000);
 })(i);
}

Clam ? Qu'est-ce qui se passe, laisse-moi y réfléchir. Ici, une fonction d'exécution immédiate est transmise à setTimeout. Eh bien, setTimeout peut accepter des fonctions ou des

chaînes

comme paramètres, alors quelle est la fonction d'exécution immédiate ici ? Elle devrait être indéfinie, ce qui équivaut à :

for (var i = 0; i < 5; i++) {
 setTimeout((function(i) {
 console.log(i);
 })(i), i * 1000);
}

La fonction d'exécution immédiate sera exécutée immédiatement, elle doit donc être sortie immédiatement.

"Il devrait afficher 0 à 4 immédiatement."

"Oh, pas mal, la dernière question, tu connais Promesse ?"

setTimeout(undefined, ...);

"C'est bon... "

"OK, alors essayez cette question."

WTF ! ! ! ! Je veux être tranquille !

Cette question devrait examiner le mécanisme d'exécution de mon JavaScript. Laissez-moi mettre de l'ordre dans ma réflexion.

Première rencontre avec setTimeout, donc une minuterie sera définie en premier, et une fois la minuterie terminée, la fonction sera transmise à la file d'attente des tâches, donc 1 ne sera certainement pas affiché au début.

setTimeout(function() {
 console.log(1)
}, 0);
new Promise(function executor(resolve) {
 console.log(2);
 for( var i=0 ; i<10000 ; i++ ) {
 i == 9999 && resolve();
 }
 console.log(3);
}).then(function() {
 console.log(4);
});
console.log(5);

Ensuite, il y a une promesse, la fonction à l'intérieur est exécutée directement, elle devrait donc afficher 2 3 directement.

Ensuite, le then de Promise doit être placé à la fin de la tick actuelle, mais toujours dans la tick actuelle.

Par conséquent, 5 doit être affiché en premier, puis 4 .

Enfin, le tick suivant est 1 .

« 2 3 5 4 1 »

« D'accord, attendons la prochaine série d'interviews

Tellement facile ! Maman n'a plus à se soucier de mes entretiens.

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!