一次圍繞setTimeout的前端面試經驗分享

這篇文章主要跟大家分享了一次圍繞setTimeout展開的前端面試經驗，是一篇有意思的圍繞setTimeout展開的前端開發考題，考察了for迴圈、定時器setTimeout()、JavaScript閉包、匿名函式和Promise等，一不小心你可能就會做錯，快來看看你有沒有掌握了上面的知識。

前言

前端這個近年的熱門領域，搞事氣氛特別強烈，我朋友小偉最近就在瘋狂面試，遇到了許多有趣的面試官，有趣的面試題，我來幫這個搞事 boy 轉述一下。

具體如下：

以下是我一個朋友的故事，真的不是我。

1 2 3

for

var


i = 0; i < 5; i++) {

console.log(i); }

“小偉，你說說這幾行程式碼會輸出什麼？”

當面試官在 Sublime 打出這幾行程式碼時，我竟有點矇蔽。蛤？這不是最簡單的一個迴圈嗎？是不是有陷阱啊，我思索一下，這好像和我看的那個閉包的題很像啊，這面試官是不是沒寫完啊？有毒啊。

“應該是直接輸出 0 到 4 吧...”，我弱弱的說到。

“是啊，別緊張，這題沒啥陷阱，我就是隨便寫一下。”

（Excuse me？面試官你是來搞笑的嗎，嚇死老子了！）

“那你在看看這幾行程式碼會輸出什麼？”

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

額，什麼鬼，怎麼還不是我背了那麼多遍的那道閉包題，讓我想想。 setTimeout 會延遲執行，那麼執行到 console.log 的時候，其實 i 已經變成 5 了，對，就是這樣，這麼簡單怎麼可能難到老子。

“應該是開始輸出一個 5，然後每隔一秒再輸出一個 5，一共 5 個 5。”

“對，那應該怎麼改才能輸出 0 到 4 呢？”

終於到我熟悉的了，加個閉包就解決了，穩！

1 2 3 4 5 6 7 for (var i = 0; i < 5; i++) { (function(i) { setTimeout(function() { console.log(i); }, i * 1000); })(i); }

“很好，那你能說一下，我刪掉這個 i 會發生什麼嗎？”