JavaScript队列函数和异步执行详解

编辑注：在Review别人的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。按我们程序员的口头禅：“做肯定是能做”，但写起来有点拧巴，而且容易把自己绕进去。有没更好的做法？