Ich habe gehört, dass Sie ein Vorstellungsgespräch für den Front-End-Bereich führen möchten?

Golden Three Silver Four Season, das Front-End war in den letzten Jahren ein heißes Feld, und die Atmosphäre ist in letzter Zeit besonders stark. Mein Freund Xiaowei hat viele interessante Interviewer und interessante Interviewfragen getroffen Ich helfe. Lassen Sie mich diesen unruhigen Jungen umschreiben.

Das Folgende ist eine Geschichte von einem Freund von mir, das bin wirklich nicht ich.

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

„Xiaowei, sag mir, was diese Codezeilen ausgeben werden?“

Als der Interviewer diese Codezeilen in Sublime eingab, war ich etwas verwirrt. Muschel? Ist das nicht die einfachste Schleife? Gibt es eine Falle? Das scheint der Abschlussfrage, die ich gesehen habe, sehr ähnlich zu sein. 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 guckst du dann auf die Ausgabe dieser Codezeilen?“

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

Ähm, was zum Teufel, warum ist es nicht der Abschluss? Ich habe es so oft auswendig gelernt? Frage, lass mich darüber nachdenken. 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?“

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

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

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

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

„In diesem Fall wird i intern nicht gepflegt.“ es wird tatsächlich 5 ausgegeben. 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? sollte sofort ausgegeben werden.

"Es sollte sofort 0 bis 4 ausgeben."

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

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

"Es ist okay ... "

setTimeout(undefined, ...);

"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 an die Aufgabenwarteschlange übergeben, sodass zunächst definitiv nicht 1 ausgegeben wird.

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

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 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.