假設你有幾個函式fn1、fn2和fn3需要按順序呼叫，最簡單的方式當然是：
|
1 2 3 |
fn1(); fn2(); fn3(); |
但有時候這些函式是執行時一個個新增進來的，呼叫的時候並不知道都有些什麼函式；這個時候可以預先定義一個陣列，新增函式的時候把函式push 進去，需要的時候從陣列中按順序一個個取出來，依次呼叫：
|
1 2 3 4 5 6 7 |
var stack = []; // 執行其他操作，定義fn1 stack.push(fn1); // 執行其他操作，定義fn2、fn3 stack.push(fn2, fn3); // 呼叫的時候 stack.forEach(function(fn) { fn() }); |
這樣函式有沒名字也不重要，直接把匿名函式傳進去也可以。來測試一下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var stack = []; function fn1() { console.log('第一個呼叫'); } stack.push(fn1); function fn2() { console.log('第二個呼叫'); } stack.push(fn2, function() { console.log('第三個呼叫') }); stack.forEach(function(fn) { fn() }); // 按順序輸出'第一個呼叫'、'第二個呼叫'、'第三個呼叫' |
這個實現目前為止工作正常，但我們忽略了一個情況，就是非同步函式的呼叫。非同步是JavaScript 中無法避免的一個話題，這裡不打算探討JavaScript 中有關非同步的各種術語和概念，請讀者自行查閱（例如某篇著名的評註）。如果你知道下面程式碼會輸出1、3、2，那請繼續往下看：
|
1 2 3 4 5 6 7 |
console.log(1); setTimeout(function() { console.log(2); }, 0); console.log(3); |
假如stack 佇列中有某個函式是類似的非同步函式，我們的實現就亂套了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var stack = []; function fn1() { console.log('第一個呼叫') }; stack.push(fn1); function fn2() { setTimeout(function fn2Timeout() { console.log('第二個呼叫'); }, 0); } stack.push(fn2, function() { console.log('第三個呼叫') }); stack.forEach(function(fn) { fn() }); // 輸出'第一個呼叫'、'第三個呼叫'、'第二個呼叫' |
問題很明顯，fn2確實按順序呼叫了，但setTimeout裡的function fn2Timeout() { console.log('第二個呼叫') }卻不是立即執行的（即使把timeout 設為0）；fn2呼叫之後馬上返回，接著執行fn3，fn3執行完了然才真正輪到fn2Timeout。
怎麼解決？我們分析下，這裡的關鍵在於fn2Timeout，我們必須等到它真正執行完才呼叫fn3，理想情況下大概像這樣：
|
1 2 3 4 5 6 |
function fn2() { setTimeout(function() { fn2Timeout(); fn3(); }, 0); } |
但這樣做相當於把原來的fn2Timeout整個拿掉換成一個新函式，再把原來的fn2Timeout和fn3插進去。這種動態改掉原函式的寫法有個專門的名詞叫Monkey Patch。按我們程式設計師的口頭禪：“做肯定是能做”，但寫起來有點擰巴，而且容易把自己繞進去。有沒更好的做法？
我們退一步，不強求等fn2Timeout完全執行完才去執行fn3，而是在fn2Timeout函式體的最後一行去呼叫：
|
1 2 3 4 5 6 |
function fn2() { setTimeout(function fn2Timeout() { console.log('第二個呼叫'); fn3(); // 注{1} }, 0); } |
這樣看起來好了點，不過定義fn2的時候都還沒有fn3，這fn3哪來的？
還有一個問題，fn2裡既然要呼叫fn3，那我們就不能通過stack.forEach去呼叫fn3了,否則fn3會重複呼叫兩次。
我們不能把fn3寫死在fn2裡。相反，我們只需要在fn2Timeout末尾裡找出stack中fn2的下一個函式，再呼叫：
|
1 2 3 4 5 6 |
function fn2() { setTimeout(function fn2Timeout() { console.log('第二個呼叫'); next(); }, 0); } |
這個next函式負責找出stack 中的下一個函式並執行。我們現在來實現next：
|
1 2 3 4 5 6 7 |
var index = 0; function next() { var fn = stack[index]; index = index + 1; // 其實也可以用shift 把fn 拿出來 if (typeof fn === 'function') fn(); } |
next通過stack[index]去獲取stack中的函式，每呼叫next一次index會加1，從而達到取出下一個函式的目的。
next這樣使用：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var stack = []; // 定義index 和next function fn1() { console.log('第一個呼叫'); next(); // stack 中每一個函式都必須呼叫`next` }; stack.push(fn1); function fn2() { setTimeout(function fn2Timeout() { console.log('第二個呼叫'); next(); // 呼叫`next` }, 0); } stack.push(fn2, function() { console.log('第三個呼叫'); next(); // 最後一個可以不呼叫，呼叫也沒用。 }); next(); // 呼叫next，最終按順序輸出'第一個呼叫'、'第二個呼叫'、'第三個呼叫'。 |
現在stack.forEach一行已經刪掉了，我們自行呼叫一次next，next會找出stack中的第一個函式fn1執行，fn1 裡呼叫next，去找出下一個函式fn2並執行，fn2裡再呼叫next，依此類推。
每一個函式裡都必須呼叫next，如果某個函式裡不寫，執行完該函式後程式就會直接結束，沒有任何機制繼續。
瞭解了函式佇列的這個實現後，你應該可以解決下面這道面試題了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// 實現一個LazyMan，可以按照以下方式呼叫: LazyMan(“Hank”) /* 輸出: Hi! This is Hank! */ LazyMan(“Hank”).sleep(10).eat(“dinner”)輸出 /* 輸出: Hi! This is Hank! // 等待10秒.. Wake up after 10 Eat dinner~ */ LazyMan(“Hank”).eat(“dinner”).eat(“supper”) /* 輸出: Hi This is Hank! Eat dinner~ Eat supper~ */ LazyMan(“Hank”).sleepFirst(5).eat(“supper”) /* 等待5秒，輸出 Wake up after 5 Hi This is Hank! Eat supper */ // 以此類推。 |
Node.js 中大名鼎鼎的connect框架正是這樣實現中介軟體佇列的。有興趣可以去看看它的原始碼或者這篇解讀《何為 connect 中介軟體》。
細心的你可能看出來，這個next暫時只能放在函式的末尾，如果放在中間，原來的問題還會出現：
|
1 2 3 4 5 |
function fn() { console.log(1); next(); console.log(2); // next()如果呼叫了非同步函式，console.log(2)就會先執行 } |
redux 和koa 通過不同的實現，可以讓next放在函式中間，執行完後面的函式再折回來執行next下面的程式碼，非常巧妙。有空再寫寫。