最新のフロントエンド インタビュー エクスペリエンス - setTimeout 周辺

この記事では、setTimeout を中心としたフロントエンドのインタビュー体験を主に共有します。これは、for ループ、timersetTimeout()、JavaScriptclosure パッケージを中心とした興味深いフロントエンド開発テストの質問です。 、匿名関数やPromiseなど、注意しないと間違いを犯す可能性がありますので、上記の知識を習得しているかどうかを確認してください。

はじめに

近年注目を集めているフロントエンドは、特に問題を起こす雰囲気が強いです。私の友人のXiaoweiは、最近狂ったように面接を行っており、多くの興味深い面接官や興味深い面接の質問に会いました。この少年を助けるためにここで言い換えさせてください。

詳細は以下のとおりです:

以下は私の友人の話であり、実際には私ではありません。

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

「Xiaowei、これらのコード行が何を出力するのか教えてもらえますか?」

面接官がこれらのコード行を Sublime で入力したとき、私は少し混乱しました。ハマグリ？これが最も単純なループではないでしょうか?私が考えた罠はありますか？これは私が見た質問と非常によく似ています。質問者は書き終えていませんでしたか？有毒です。

「0から4をそのまま出力すればいいのに…」と私は力なく言いました。

「はい、緊張しないでください。この質問には罠はありません。何気なく書いているだけです。」

（すみません？面接官、冗談を言いに来たのですか？死ぬほど怖いです！）

「それでは、これらのコード行が何を出力するのか見てください。」

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

うーん、何だ、なぜ私が何度も覚えた終わりの質問ではないのですか? 考えさせてください。 setTimeout は実行を遅らせるので、console.log が実行されると、実際には 5 になります。 はい、それだけです。これほど単純なことを行うのがどうしてこんなに難しいのでしょうか。

「5 の出力を開始し、その後 1 秒ごとに 5 を出力し、合計 5 つの 5 を出力する必要があります。」

「はい、0 から 4 を出力できるようにするには、どう変更すればよいでしょうか?」私がよく知っていること はい、クロージャーを追加するだけで解決します。安定しています。

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

「わかりました。これを削除するとどうなるか教えていただけますか?」

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

"この場合、実際には内部的に i への

参照

はありません。出力 5 になります。 「「わかりました。変更して、出力がどうなるか見てみましょう?」一体、何が起こっているのか、考えさせてください。ここでは、即時実行関数が setTimeout に渡されます。さて、setTimeout は関数または

文字列

をパラメータとして受け入れることができます。それでは、ここでの即時実行関数とは何でしょうか?これは未定義である必要があります。これは次と同等です。すぐに出力されます。

「すぐに 0 から 4 が出力されるはずです。」

「ああ、悪くないです。最後の質問ですが、Promise について知っていますか?」

「大丈夫です...」

「OK、それでは試してみてください。」質問「

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

なんてことだ！」 ！ ！ ！静かにしたい！

この質問は私の JavaScript の実行メカニズムを調べる必要があります。私の考えを整理させてください。

最初に setTimeout が発生するため、最初にタイマーが設定され、タイマーが終了した後、関数が渡されてタスクキューに配置されるため、最初は絶対に 1 が出力されません。

次に Promise があり、内部の関数は直接実行されるため、 2 3 が直接出力されるはずです。

その後、Promise の then は現在のティックの最後に配置する必要がありますが、まだ現在のティック内にあります。

つまり、最初に 5 が出力され、次に 4 が出力されるはずです。

最後に、次のティックは 1 です。

「2 3 5 4 1」

「わかりました、次の面接を待ちましょう。」

とても簡単です!お母さんはもう私の面接について心配する必要はありません。

以上が最新のフロントエンド インタビュー エクスペリエンス - setTimeout 周辺の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。