在參考別人的JavaScript程式碼時曾經看過類似的佇列函數，不太理解，原來這個是為了保證函數會依序呼叫。本文主要跟大家介紹JavaScript佇列函數與非同步執行方法，希望能幫助大家。
假設你有幾個函數fn1、fn2和fn3需要按順序調用，最簡單的方式當然是：
fn1();fn2();fn3();
但有時候這些函數是運行時一個個添加進來的，呼叫的時候不知道都有些什麼函數；這時候可以預先定義一個數組，添加函數的時候把函數push 進去，需要的時候從數組中按順序一個個取出來，依次調用：
var stack = [];// 执行其他操作，定义fn1stack.push(fn1);// 执行其他操作，定义fn2、fn3stack.push(fn2, fn3);// 调用的时候stack.forEach(function(fn) { fn() });這樣函數有沒名字也不重要，直接把匿名函數傳進去也可以。來測試一下：
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，那請繼續往下看：
console.log(1);
setTimeout(function() {
console.log(2);
}, 0);console.log(3);假如stack 佇列中有某個函數是類似的非同步函數，我們的實作就亂套了：
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，理想情況下大概像這樣：
function fn2() {
setTimeout(function() {
fn2Timeout();
fn3();
}, 0);
}但這樣做相當於把原來的fn2Timeout整個拿掉換成一個新函數，再把原來的fn2Timeout和fn3插進去。這種動態改掉原函數的寫法有個專門的名詞叫Monkey Patch。按我們程式設計師的口頭禪：“做肯定是能做”，但寫起來有點擰巴，而且容易把自己繞進去。有沒更好的做法？
我們退一步，不強求等fn2Timeout完全執行完才去執行fn3，而是在fn2Timeout函數體的最後一行去調用：
function fn2() {
setTimeout(function fn2Timeout() {
console.log('第二个调用');
fn3(); // 注{1}
}, 0);
}這樣看起來好了點，不過定義fn2的時候都還沒有fn3，這fn3哪來的？
還有一個問題，fn2裡既然要呼叫fn3，那我們就不能透過stack.forEach去呼叫fn3了,否則fn3會重複呼叫兩次。
我們不能把fn3寫死在fn2裡。相反，我們只需要在fn2Timeout末尾找出stack中fn2的下一個函數，再呼叫：
function fn2() {
setTimeout(function fn2Timeout() {
console.log('第二个调用'); next();
}, 0);
}這個next函數負責找出stack 中的下一個函數並執行。我們現在來實作next：
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這樣使用：
var stack = [];
// 定义index 和nextfunction 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，如果某個函數裡不寫，執行完函數後程式就會直接結束，沒有任何機制繼續。
了解了函數佇列的這個實作後，你應該可以解決下面這道面試題了：
// 实现一个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暫時只能放在函數的末尾，如果放在中間，原來的問題還會出現：
function fn() {
console.log(1);
next();
console.log(2); // next()如果调用了异步函数，console.log(2)就会先执行}redux 和koa 透過不同的實現，可以讓next放在函數中間，執行後的函數再折回來執行next下面的程式碼，非常巧妙。有空再寫寫。
相關推薦：
分享一個封裝的javascript事件佇列函數程式碼，解決綁定事件問題
自己封裝的javascript事件佇列函數版_javascript技巧
以上是詳解JavaScript佇列函數與非同步執行的詳細內容。更多資訊請關注PHP中文網其他相關文章！
