一篇深度理解setInterval和setTimeout以及JS执行机制

setInterval和setTimeout是定义在window上的两个函数

这两个函数接受两个参数：
1. 第一个参数：接受一个回调函数 callback
2. 第二个参数：表示推迟执行的毫秒数。 time

//每隔100毫秒输出一个1
setInterval(function(){
  console.log(1);
},100);
//100毫秒后输出1，仅输出一次
setTimeout(function(){
  console.log(1);
},100);

不同的是：
1. setTimeout表示定时器，在指定毫秒数后执行回调函数，仅执行一次；而setInterval表示定时循环器，每间隔指定毫秒数就执行一遍回调函数，若是计时器不被清除，回调函数会执行无数遍
2. 清除定时器时，setInterval对应clearInterval()，setTimeout对应clearTimeout()
clearInterval和clearTimeout也都是定义在window上的函数，接受一个参数表示定时器的名字，根据这个名字清除对应的定时器

使用定时器时注意几点：
1. 若在创建定时器时没有名字，则定时器无法清除；
2. 定时器定义在全局对象window上，内部函数this指向的window；
3. setInterval里面传递的毫秒数只会在第一次的时候识别，之后不能改了
4. setTimeout, setInterval是异步任务

有些同学可能还不知道异步任务是什么？

其实要深入理解异步，还得理解js的执行机制
我们先来看个例子吧

//下面代码的执行结果是什么
var p = new Promise(resolve => {
    console.log(4);
    resolve(5);
});
function func1() {
    console.log(1)
}
function func2() {
    setTimeout(() => {
        console.log(2)
    });
    func1();
    console.log(3);
    p.then(resolved => {
        console.log(resolved)
    }).then(() => {
        console.log(6)
    });
}
func2();

答案：4 1 3 5 6 2
不知道你答对了没？
如果答对了，说明你对JS执行机制有较深的了解，继续往下看可以复习和巩固；如果不知道或者答错了，也别伤心，本文下面部分会给你答案

我们知道js的一大特点就是单线程，同一时间只能做一件事情。但是为什么要设计成单线程呢？
其实跟它的用途有关，js作为浏览器的脚本语言，主要用途就是于用户互动和操作DOM。想想如果被设计成多线程，一个线程在某个DOM节点上添加内容，另外一个线程在删除这个节点，那浏览器该听谁的？
所以，为了避免多线程带来的复杂问题，从设计之初就决定了JS就是单线程，这称为这门语言的核心特性，将来也不会改变。
为了利用多核CUP的计算能力，HTML5提出了Web Worker标准，允许JS 创建多个线程，但是子线程完全受主线程的控制，且子线程不能操作DOM。所以，这个新标准并没有改变js单线程的本质。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。但是如果有些任务很慢时（比如Ajax操作从网络读取数据），我还是要等结果在执行后一个任务吗？这样不好吧
于是，有了一种异步任务。
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；而异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有主线程执行完毕，主线程去通知"任务队列"，某个异步任务可以执行了，该任务才会进入主线程执行。
所以其实js多线程的实现就是通过异步的方式来实现的
运行机制如下：
（1）所有同步任务都在主线程上执行，形成一个执行栈（Call Stack）
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

执行栈用于组织JS代码，保障JS代码的有序执行。每当调用一个函数时，都会将该函数压入执行栈中，执行完弹出，接着调用下一个函数

第二步中，异步任务的运行结果其实背后借助了浏览器的其他线程

浏览器内核常驻的线程：

js引擎线程
用于解释执行js代码、用户输入、网络请求等
GUI渲染线程
绘制用户界面，与JS主线程互斥（因为js可以操作DOM，进而会影响到GUI的渲染结果）
http异步网络请求线程
处理用户的get、post等请求，等返回结果后将回调函数推入到任务队列
定时触发器线程
setInterval、setTimeout等待时间结束后，会把执行函数推入任务队列中
浏览器事件处理线程
将click、mouse等交互事件发生后，将要执行的回调函数放入到事件队列中

任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。
主线程空了，才会再去读取"任务队列"，但是任务队列在不同的宿主环境中有所差异，大部分宿主环境会将任务队列分成macrotask（宏任务）和 microtask（微任务）

宏任务主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
微任务主要包含：Promise then、async await、MutaionObserver、process.nextTick(Node.js 环境)

当执行栈清空时，JS引擎首先会将微任务中的所以任务依次执行结束，如果没有微任务了，则执行宏任务。

"主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。但是定时器首先要检查是否到了执行时间，到了规定的时间，才进入主线程执行，执行完再去任务队列中读取下一个事件，这个过程是不断循环的，我们把这种循环的机制称为Event Loop（事件循环），即
主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API(即各种函数)，它们在"任务队列"中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。

再来看定时器
如果将setTimeout()的第二个参数设为0，表示当执行栈清空以后，立即执行（0毫秒间隔）指定的回调函数。

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

结果是2,1，因为只有在执行完第二行以后，系统才会去执行"任务队列"中的回调函数。
HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。
需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈以及排在前面的微任务）执行完，主线程才会去执行定时器中指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

最后回来看看上面的那道题目：

//下面代码的执行结果是什么
var p = new Promise(resolve => {
    console.log(4);
    resolve(5);
});
function func1() {
    console.log(1)
}
function func2() {
    setTimeout(() => {
        console.log(2)
    });
    func1();
    console.log(3);
    p.then(resolved => {
        console.log(resolved)
    }).then(() => {
        console.log(6)
    });
}
func2();

执行
第一步：new Promis压放入执行栈中，然后执行里面的代码，打印4，执行resolve(5);注意这里跟new普通函数一样是正常执行的，不会加入到宏任务中；
第二步：执行func2()，
遇到setTimeout，将它放入宏任务中；
接着执行func1();打印出1
接着console.log(3);打印3
遇到Promise对象执行then()时，这里是异步操作，会将里面回调函数放入微任务中，等待执行
当执行栈被清空时，执行微任务中的console.log(resolved)，打印出5，接着再去微任务中找到下个事件，打印出6；
当微任务清空后，再执行宏任务，即setTimeout到时间后会答应出2,
所以最后答案为：4 1 3 5 6 2

参考资料：
深入理解定时器系列第一篇——理解setTimeout和setInterval
setTimeout和setInterval的深入理解
 UI多线程-深入剖析Js执行机制
 深入理解JavaScript事件循环机制
 2分钟了解 JavaScript Event Loop
JavaScript微任务与宏任务、异步、事件循环与消息队列理解
 深度剖析JavaScript事件循环机制（未完善）
为什么javascript是单线程？
JavaScript 运行机制详解：再谈Event Loop—作者：阮一峰
 浏览器内核常驻线程