setTimeout 和 Event Loop

我记得有一次面试的时候，面试官问道，setTimeout 的用法，现在就来总结一下。

setTimeout 的基本用法

setTimeout(fn,delay)

一般情况下，setTimeout函数接收两个参数，第一个参数fn是将要推迟执行的函数名或者是一段代码，第二个参数 delay 是推迟执行的毫秒数。

例如：

setTimeout('console.log(1)',1000);
setTimeout(function(){
   console.log(2)},1000);

如果直接在 setTimeout 中直接执行代码，需要用字符串的形式去写，引擎内部会将字符串转为可执行的代码。

2、再来一些简单些的代码

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);

依次输出的是 // 1 3 2

3、代码升级版

console.log(1);

setTimeout(function(){
   
    console.log(2);
},300);

setTimeout(function(){
   
    console.log(3)
},400);

for (var i = 0;i<10000;i++) {
   
    console.log(4);
}
setTimeout(function(){
   
    console.log(5);
},100);

这个答案我们在后面揭晓。接下来我们讲一下 EventLoop。

Event Loop 简介

我们知道，js 是单线程的，所谓的单线程是指 JS 引擎中负责解释和执行 js 代码的线程只有一个，可以叫它 主线程。
除了主线程，还存在其他的线程，例如：处理 axios 和 ajax 请求的线程，处理 DOM 时间的线程，定时器的线程，node.js 中读写文件的线程。我们以 setTimeout 为例，当在代码中调用 setTimeout 方法时，注册的延时方法会交由 浏览器的内核其他模块（以webkit为例，是 webcore 模块）处理，当延时方法到达触发条件，即到达设置的延时时间时，这一延时的方法会被添加到任务队列中。这一过程由浏览器内核其他模块处理，与执行引擎主线程独立，执行引擎在主线程方法执行完毕，到达空闲状态时，会从任务队列中顺序获取任务来执行，这一过程是一个不断循环的过程，成为事件循环模型。

上面这张图中 heap 是堆，stack 是栈。js 执行引擎的主线程运行的时候，会产生堆和栈。程序中代码依次进入到栈中等待执行，当调用 setTimeout 方法的时候，即图中右边的 webAPIs 方法的时候，浏览器内核想应模块开始延时方法的处理，当延时方法到达触发条件时，方法会被添加到用于回调的任务队列，只有执行引擎栈中的代码执行完毕，主线程才会去读取任务队列，依次执行那些满足触发条件的回调函数。

在上图中的callback queue中指的是 “任务队列”，也可以理解为消息的队列，“消息“我们可以简单理解为是：注册异步任务时添加的回调函数。

理解 js 代码的执行

用一段代码的运行来进行理解，代码如下：

console.log