Das neueste Front-End-Interview-Erlebnis – rund um setTimeout

Dieser Artikel teilt Ihnen hauptsächlich eine Front-End-Interview-Erfahrung mit Schwerpunkt auf setTimeout. Es handelt sich um eine interessante Front-End-Entwicklungstestfrage, die sich auf setTimeout konzentriert. Sie untersucht for-Schleife und TimersetTimeout(), JavaScript-Abschluss, anonyme Funktion und Promise usw. Sie können Fehler machen, wenn Sie nicht aufpassen, ob Sie die oben genannten Kenntnisse beherrschen.

Vorwort

Front-End, ein beliebtes Feld in den letzten Jahren, hat eine besonders starke Atmosphäre, in der mein Freund Xiaowei Ärger macht Ich habe kürzlich ein verrücktes Interview geführt und viele interessante Interviewer und interessante Interviewfragen getroffen. Lassen Sie mich diesem Unruhestifter helfen, sie zu erklären.

Die Details sind wie folgt:

Das Folgende ist die Geschichte eines Freundes von mir, das bin wirklich nicht ich.

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

"Xiaowei, sagen Sie mir, was diese Codezeilen ausgeben werden?"

Wenn der Interviewer dies in Sublime A ein paar eingibt Nachdem ich später Codezeilen gelesen hatte, war ich etwas verwirrt. Muschel? Ist das nicht die einfachste Schleife? Gibt es eine Falle? Ich habe darüber nachgedacht, dass dies der Abschlussfrage, die ich gesehen habe, sehr ähnlich ist. Es ist giftig.

„Es sollte direkt 0 bis 4 ausgeben ...“, sagte ich schwach.

„Ja, seien Sie nicht nervös, diese Frage enthält keine Fallen, ich schreibe sie nur beiläufig.“

(Entschuldigung? Interviewer, sind Sie hier, um lustig zu sein? Ich Ich habe Todesangst! )

„Was sehen Sie dann bei der Ausgabe dieser Codezeilen?“ setTimeout verzögert die Ausführung. Wenn console.log ausgeführt wird, ist i tatsächlich 5. Ja, das ist es. Wie kann es für mich so schwierig sein, etwas so Einfaches zu tun?

„Es sollte mit der Ausgabe einer 5 beginnen und dann jede Sekunde eine 5 ausgeben, insgesamt 5 5 Sekunden.“

„Ja, wie sollte es geändert werden, um 0 bis 4 auszugeben?“

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

Endlich ist es etwas, mit dem ich vertraut bin. Fügen Sie einfach einen Verschluss hinzu und es ist gelöst, es ist stabil!

„Sehr gut, können Sie mir sagen, was passiert, wenn ich dieses i lösche?“

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

„In diesem Fall gibt es keinen internen

Verweis

auf i, und es wird tatsächlich Ausgabe 5.“

„Sehr gut, dann werde ich es für Sie ändern.“ , was wird ausgegeben? "

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

Clam? Was zum Teufel, was ist los, lass mich darüber nachdenken. Hier wird eine Funktion zur sofortigen Ausführung an setTimeout übergeben. Nun, setTimeout kann Funktionen oder

Zeichenfolgen

als Parameter akzeptieren. Was ist also die Funktion zur sofortigen Ausführung? Sie sollte undefiniert sein, was äquivalent ist zu:

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

Die Funktion zur sofortigen Ausführung wird sofort ausgeführt und sollte daher sofort ausgegeben werden.

"Es sollte sofort 0 bis 4 ausgeben."

"Oh, nicht schlecht, die letzte Frage, weißt du, Promise?"

setTimeout(undefined, ...);

"Es ist okay ... "

"OK, dann versuchen Sie es mit dieser Frage."

WTF! ! ! ! Ich möchte ruhig sein!

Diese Frage sollte den Laufmechanismus meines JavaScripts untersuchen.

Begegnen Sie zuerst einem setTimeout, sodass zuerst ein Timer eingestellt wird. Nach Ablauf des Timers wird die Funktion übergeben und in die Aufgabenwarteschlange gestellt, sodass zunächst definitiv nicht 1 ausgegeben wird.

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);

Dann gibt es ein Versprechen, die darin enthaltene Funktion wird direkt ausgeführt, sodass 2 3 direkt ausgegeben werden sollte.

Dann sollte das Then von Promise am Ende des aktuellen Ticks platziert werden, aber immer noch im aktuellen Tick.

Daher sollte zuerst 5 und dann 4 ausgegeben werden.

Schließlich ist der nächste Tick 1 .

„2 3 5 4 1“

„Okay, warten wir auf die nächste Interviewrunde.“

So einfach! Mama muss sich um meine Vorstellungsgespräche keine Sorgen mehr machen.

Das obige ist der detaillierte Inhalt vonDas neueste Front-End-Interview-Erlebnis – rund um setTimeout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!