1
2
3
4
5
6
7
8
9

function A() {
    var a = 3;
    B(3);
}
function B(num) {
    var newNum = num * num;
    console.log(newNum);
}
A();

当代码运行的时候，为便于理解我们假设栈底有一个main()方法（类似于Java中的入口Main方法）作为运行的开始。

1.代码开始执行

2.运行A()方法，将A()入栈，此时A上下文中存在变量 a = 3

3.调用B()方法，将B()入栈，此时B上下文中存在变量 num = 3，newNum = 9

4.调用B()方法中的console.log()，入栈，控制台打印 9

5.继续运行，依次将console.log()，和B()方法出栈

6.A()方法运行完毕出栈

7.代码运行完成，清空栈

这就是一段简单的代码在堆栈中的执行情况，看明白了就能开始介绍Javascript引擎的另外一个机制。

回到我们熟悉的JS引擎，为实现这样的特性，这里就需要引申出一个重要的东西， Event Loop （事件循环）。

当异步方法比如这里的 setTimeout() ，或者 ajax请求 、 DOM事件执行 的时候，会交由浏览器内核的其他模块去管理。当异步的方法满足触发条件后，该模块就会将方法推入到一个任务队列（ task queue ）中，当主线程代码执行完毕处于空闲状态的时候，就会去检查任务队列，将队列中第一个任务入栈执行，完毕后继续检查任务队列，如此循环。前提条件是主线程处于空闲状态，这就是事件循环的模型。

1
2
3
4
5
6
7
8
9
10
11
12
13

console.log('start');

//Timer1
setTimeout(function () {
    console.log('hello');
}, 200);

//Timer2
setTimeout(function () {
    console.log('world');
}, 100);

console.log('end');

为了让大家更直观的看到执行的顺序，做了一个GIF

图上可以看出，首先依然是main()开始，首先第一个console.log()入栈执行，执行完毕控制台打印’start’后出栈，紧接着执行到setTimeout定时器，此时JS引擎会将定时器交给浏览器的另一个模块去管理（为方便理解这里把它叫做Timer模块），然后主线程继续向下执行，紧接着将第二个定时器也交给Timer模块，然后执行到第二个console.log()，控制台打印’end’，执行完毕后清空执行栈。但是并没有结束，在主线程执行的同时，Timer模块会检查其中的异步代码，一旦满足触发条件，就会将它添加到任务队列中。Timer2延迟100ms，所以会早于Timer1被添加到队列排头。而主线程此时处于空闲状态，所以会检查任务队列是否有待执行的任务。此时会将Timer2回调中的console.log()执行，控制台打印’world’，然后执行栈空闲后继续检查任务队列，将Timer1的代码压入执行栈中执行，控制台打印’hello’，清空执行栈，此时任务队列为空，执行结束。

控制台依次打印出：

再来看开篇第二段改版代码，就比较好玩了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

console.log('start');

//Timer1
setTimeout(function () {
    console.log('hello');
}, 200);

//Timer2
setTimeout(function () {
    console.log('world');
}, 300);

// 此处仅代表模拟一个耗时运算，这里假设时间大于1秒，
// 便于理解本文的重点，此处不需要过分探究执行时间
for (var i=0;i<10000;i++) {
    console.log(1);
}

//Timer3
setTimeout(function () {
    console.log('I am run');
}, 100);

console.log('end');

和第一段不同的是，在最后一个定时器前加了一段for循环，（注：此处仅用来模拟一段比较耗时的运算，假设时间大于1秒，代码真正执行时间不必深究）。chrome控制台运行结果是：

前面的那张Gif图看懂了以后，其实从’world’之前的打印应该都是没有问题的。但是奇怪的地方就是，Timer3仅仅延迟了100ms，反而在另外两个Timer之后执行了。其实这里原因很简单，因为在Timer1和Timer2加入到执行队列中后，主线程依然还在执行for循环中的代码，处于阻塞状态。队列中的Timer1和Timer2并不会得以执行。当for循环结束，这时才将Timer3交由Timer模块去管理，继续执行后续代码打印’end’，清空执行栈。虽然在这里Timer3的延迟时间最短，但是加入任务队列后还是会排在Timer1和Timer2的后面，所以此时按顺序执行任务队列中的代码，依次打印’hello’、’world’、’I am run’。同时需要注意的是，这种情况下的三个定时器延迟执行的时间已经远远超过了指定的时间。

还有一点值得特别注意的是，有些同学可能会写过这样的代码：

1

setTimeout(function () {}, 0);

其实JS引擎在处理这段代码的时候，并不是真正的延迟0ms执行。不同的浏览器会默认有一个最小的延迟时间，低于这个时间间隔会按照默认最小的时间间隔来处理。