图例详解那道 setTimeout 与循环闭包的经典面试题

转自：www.jianshu.com/p/9b4a54a98660

http://www.toutiao.com/i6430009354899948034/

前言

如果写过js代码的人对于setTimeout方法一定不会感到陌生。setTimeout是一种定时器，在前端开发中有很多的应用场景，比如在购物车结算成功后，等待几秒会自动跳转至列表页。今天我们就深入的看下setTimeout的实现原理。

Javascript之setTimeout

基本用法

根据W3C的标准解释，setTimeout是定义一个在指定时间后触发的函数。

我们先来看看setTimeout的基本用法，实现这样一个简单的效果，点击一个button，在3秒后页面上的文字消失。

setTimeout基本用法

由于这段代码非常基础，这里不做过多讲述。

setTimeout(fn, 0)

上面一部分说到setTimeout是相当于给函数定义一个‘闹钟’，当到了指定的时间后就会自动执行函数。但是如果我们将时间设置为0，即出现setTimeout(fn, 0)这样的代码，情况是怎么样的呢？是会立即执行吗？

我们可以通过以下一段代码来进行测试。

测试代码

如果和我们猜测的一样，立即执行的话，上面的测试代码会按照1 > 2 > 3的顺序输出，但是实际运行后，我们发现输出结果的顺序为1 > 3 > 2，而且不管运行多少次结果都不变。

出现了这样的结果，就证明了setTimeout(0)并不是立即执行的，那这又该怎么解释呢？

JS单线程执行

为了解释上面这个问题，我们要追溯到JS执行过程，我们都知道JS是单线程执行，所有的异步事件，包括自定义的页面DOM事件，定时器，Ajax请求都会被添加到一个任务列表按照顺序执行。

因为JS脚本文件是运行在浏览器端的，我们的JS引擎虽然是单线程的，但是对于浏览器来说确是多线程的。浏览器中不仅包括JS引擎，还包括网络请求Ajax，浏览器渲染等，它们都有特定的线程去执行。

setTimeout并不能作为多线程使用，可以通过以下一段代码来证明。

测试代码

对于以上一段代码，如果setTimeout可以作为多线程使用，则新的线程会在一秒后将isEnd属性设置false，那么在一秒后会alert出end字符串。

但是实际情况确是，页面从未打印出end字符串，而且页面会呈现锁死状态，这是因为isEnd变量值并未修改为false，相当于执行while(true)，最终页面会崩溃。这也就能证明JS引擎是单线程执行状态。

事件队列

既然JS引擎是单线程执行，那么setTimeout定义的事件该具体何时触发呢？

这里我们需要深入到浏览器内核设计，在内核中涉及到一个事件队列的概念，我们可以直接看如下这张图。

事件队列

从上面这张图很容易看出，在浏览器内核中包含了各式各样的线程，有浏览器GUI渲染线程，Javascript引擎线程，网络请求线程。

在当JS引擎执行到其他线程相关的代码时，就会执行其他线程的代码，在其他线程执行完毕后需要JS引擎重新运行时，就会在JS引擎的事件队列里添加一个任务。

现在我们来看看setTimeout(0)做了什么？它会开启一个定时器线程，并不会影响后续的代码执行，这个定时器线程会在事件队列后面添加一个任务，例如上面图中的t3。等到前面的t1，t2执行完后再去执行t3，因此在前面第二部分内容中的输出顺序为1 > 3 > 2。

setInterval

既然说到了setTimeout，就不得不提到setInterval，setInterval同样作为一种定时器，是在指定的时间间隔后执行相应的函数。

一种最常见的场景是页面上的倒计时实现。这里我们实现一个简单的效果，指定一个时间，并进行倒计时。

倒计时

对比

setTimeout与setInterval虽然都是定时器，但是在执行上还是有不一样的。

1. setTimeout是指定的时间后执行一次；setInterval是在每隔指定的时间后执行多次。

2. setTimeout(fn1, t1)，fn1的执行时间是大于或等于t1的；setInterval(fn2, t2)，fn2的执行会始终尝试在t2时间后执行，如果网络请求较大的话，会出现fn2连续执行的情况。