setTimeout、setInterval、requestAnimationFrame、requestIdleCallback与promise执行机制详解

一、关于javascript

javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的”多线程”都是用单线程模拟出来的，一切javascript多线程都是纸老虎！

一、javascript事件循环

既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类：

• 同步任务

• 异步任务

同步和异步任务分别进入不同的执行”场所”，同步的进入主线程，异步的进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行

一、同步执行

同步基本上自上而下执行的代码顺序

let a = '1';
console.log(a);

let b = '2';
console.log(b);
结果：
1；
2；

二、异步执行

在主线程任务都执行完毕后会从异步任务列表获取异步函数进行执行

• ajax请求
• 定时器
• promise

1. Ajax请求

举个厘子

let data = [];
$.ajax({
    url:www.javascript.com,
    data:data,
    success:() => {
        console.log('发送成功!');
    }
})
console.log('代码执行结束');

上面是一段简易的ajax请求代码：

ajax进入Event Table，注册回调函数success。 执行console.log(‘代码执行结束’)。
ajax事件完成，回调函数success进入Event Queue。 主线程从Event Queue读取回调函数success并执行。
所以结果为：

1. 代码执行结束
2. 发送成功

2. 定时器

JS提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下

1. setTimeout: 设置一个定时器，在定时器到期后执行一次函数或代码段

var timeoutId = window.setTimeout(func[, delay, param1, param2, …]);
var timeoutId = window.setTimeout(code[, delay]);

• timeoutId: 定时器ID
• func: 延迟后执行的函数
• code: 延迟后执行的代码字符串，不推荐使用原理类似eval()
• delay: 延迟的时间（单位：毫秒），默认值为0 param1,param2: 向延迟函数传递而外的参数，IE9以上支持

举个粒子

// 下面代码执行之后会输出什么？
var  timeoutId;

timeoutId = setTimeout(function () {
    console.log(1);
}, 300);

setTimeout(function () {
    clearTimeout(timeoutId);
    console.log(2);
}, 100);

setTimeout('console.log("5")', 400);
输出为：2，4

//如果是事件循环呢；


var time = 100

for(var i = 0; i < 10 ; i++){   
	setTimeout(()=>{ console.log(i)
 },time ) }

// 输出为？
// 9，9 会出现9次
for(var i = 0; i < 10 ; i++){   
	setTimeout((i)=>{ console.log(i)
 },time,i ) }

// 输出为？
0
1
2
3
4
5
6
7
8
9

2. setInterval: 以固定的时间间隔重复调用一个函数或者代码段

var intervalId = window.setInterval(func, delay[, param1, param2,]);
var intervalId = window.setInterval(code, delay);

• intervalId: 重复操作的ID
• func: 延迟调用的函数
• code: 代码段
• delay: 延迟时间，没有默认值

举个厘子

// 下面代码执行之后会输出什么？
var intervalId, timeoutId;

timeoutId = setTimeout(function () {
    console.log(1);
}, 300);

setTimeout(function () {
    clearTimeout(timeoutId);
    console.log(2);
}, 100);

setTimeout('console.log("5")', 400);

intervalId = setInterval(function () {
    console.log(4);
    clearInterval(intervalId);
}, 200);

// 分别输出: 2、4、5

3. setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node
   0.10+中有实现)，类似setTimeout(func, 0)

var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);

• immediateId: 定时器ID
• func: 回调
• 浏览器限制性很强，所以并不常用；

4. requestAnimationFrame:专门为实现高性能的帧动画而设计的API，但是不能指定延迟时间，而是根据浏览器的刷新频率而定（帧）

var requestId = window.requestAnimationFrame(func);

• func: 回调

• 本文不做详细介绍，可以推荐链接，链接2

上面简单的介绍了四种JS的定时器，而本文将会主要介绍比较常用的两种：setTimeout和setInterval。

二、深入浅出

1、setInterval 和 setTimeout的区别？

// 执行在面的代码块会输出什么？
setTimeout(function () {
    console.log('timeout');
}, 1000);

setInterval(function () {
    console.log('interval')
}, 1000);

// 输出一次 timeout，每隔1S输出一次 interval

/*--------------------------------*/

// 通过setTimeout模拟setInterval 和 setInterval有啥区别么？
var callback = function () {
    if (times++ > max) {
        clearTimeout(timeoutId);
        clearInterval(intervalId);
    }

    console.log('start', Date.now() - start);
    for (var i = 0; i < 990000000; i++) {}
    console.log('end', Date.now() - start);
},
delay = 100,
times = 0,
max = 5,
start = Date.now(),
intervalId, timeoutId;

function imitateInterval(fn, delay) {
    timeoutId = setTimeout(function () {
        fn();

        if (times <= max) {
            imitateInterval(fn ,delay);
        }
    }, delay);
}

imitateInterval(callback, delay);
intervalId = setInterval(callback, delay);

如果是setTimeout和setInterval的话，它俩仅仅在执行次数上有区别，setTimeout一次、setIntervaln次。

而通过setTimeout模拟的setInterval与setInterval的区别则在于：

1、setTimeout只有在回调完成之后才会去调用下一次定时器，
2、setInterval则不管回调函数的执行情况，当到达规定时间就会在事件队列中插入一个执行回调的事件，
3、setInterval(fn,ms)来说，我们已经知道不是每过ms秒会执行一次fn，而是每过ms秒，会有fn进入Event Queue。一旦setInterval的回调函数fn执行时间超过了延迟时间ms，那么就完全看不出来有时间间隔了。这句话请读者仔细品味。

所以在选择定时器的方式时需要考虑setInterval的这种特性是否会对你的业务代码有什么影响？

1、setInterval 、setTimeout、promise、process.nextTick的执行顺序？

传统的定时器我们已经研究过了，接着我们探究Promise与process.nextTick(callback)的表现。

Promise的定义和功能本文不再赘述，不了解的读者可以学习一下阮一峰老师的Promise。而process.nextTick(callback)类似node.js版的”setTimeout”，在事件循环的下一次循环中调用 callback 回调函数。
我们进入正题，除了广义的同步任务和异步任务，我们对任 务有更精细的定义：

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
micro-task(微任务)：Promise，process.nextTick

不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue。

事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。听起来有点绕，我们用下面面试题的说明：

setTimeout(function(){
    console.log('定时器开始啦')
});


new Promise(function(resolve){
    console.log('马上执行for循环啦');
    for(var i = 0; i < 10000; i++){
        i == 99 && resolve();
    }
}).then(function(){
    console.log('执行then函数啦')
});

console.log('代码执行结束');

依照js是按照语句出现的顺序执行这个理念，自信的写下输出结果：
//"定时器开始啦"
//"马上执行for循环啦"
//"执行then函数啦"
//"代码执行结束"

1. 这段代码作为宏任务，进入主线程。
2. 先遇到setTimeout，那么将其回调函数注册后分发到宏任务Event Queue。(注册过程与上同，下文不再描述)
3. 接下来遇到了Promise，new Promise立即执行，then函数分发到微任务Event Queue。 遇到console.log()，立即执行。
4. 好啦，整体代码script作为第一个宏任务执行结束，看看有哪些微任务？我们发现了then在微任务Event Queue里面，执行。
5. ok，第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务Event Queue开始。
6. 我们发现了宏任务EventQueue中setTimeout对应的回调函数，立即执行。
7. 结束。

我们来分析一段较复杂的代码，看看你是否真的掌握了js的执行机制：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

第一轮事件循环流程分析如下：

1. 整体script作为第一个宏任务进入主线程，遇到console.log，输出1。

2. 遇到setTimeout，其回调函数被分发到宏任务Event Queue中。我们暂且记为setTimeout1。

3. 遇到process.nextTick()，其回调函数被分发到微任务Event Queue中。我们记为process1。

4. 遇到Promise，new Promise直接执行，输出7。then被分发到微任务Event Queue中。我们记为then1。

5. 又遇到了setTimeout，其回调函数被分发到宏任务Event Queue中，我们记为setTimeout2。 示例图片

6. 上表是第一轮事件循环宏任务结束时各Event Queue的情况，此时已经输出了1和7。

7. 我们发现了process1和then1两个微任务。

8. 执行process1,输出6。

9. 执行then1，输出8。
   第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8。那么第二轮时间循环从setTimeout1宏任务开始：

10. 首先输出2。接下来遇到了process.nextTick()，

11. 同样将其分发到微任务Event Queue中，记为process2。

12. new Promise立即执行输出4，then也分发到微任务Event Queue中，记为then2。

第二轮事件循环宏任务结束，我们发现有process2和then2两个微任务可以执行。

• 输出3。
• 输出5。

第二轮事件循环结束，第二轮输出2，4，3，5。
第三轮事件循环开始，此时只剩setTimeout2了，执行。

• 直接输出9。

将process.nextTick()分发到微任务Event Queue中。记为process3。

• 直接执行new Promise，输出11。

将then分发到微任务Event Queue中，记为then3。
第三轮事件循环宏任务执行结束，执行两个微任务process3和then3。

• 输出10。
• 输出12。

第三轮事件循环结束，第三轮输出9，11，10，12。

整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。

(请注意，node环境下的事件监听依赖libuv与前端环境不完全相同，输出顺序可能会有误差)

链接：https://juejin.im/post/59e85eebf265da430d571f89
链接：http://caibaojian.com/javascript-timer.html
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。