JS运行机制

1. 引言

首先 talk is cheap，show me the code！

console.log(1)
setTimeout(() => {
console.log(2)
},1000)
console.log(3)

运行结果显而易见是：1 3 2
因为我们的setTimeout做了延时处理啊！
那么下面这行代码呢？

console.log(1)
setTimeout(() => {
console.log(2)
},0)
console.log(3)

运行结果同样是：1 3 2
为什么呢？
无论setTimeout的执行时间是0还是1000，结果都是先输出3后输出2，因为setTimeout就是一个异步任务。

这里我们首先知道了JS里的一种分类方式，就是将任务分为：同步任务和异步任务。

2. js的执行机制

首先判断JS是同步还是异步，同步就进入主线程，异步就进入异步队列等待
异步任务在异步队列中注册函数，当满足触发条件后，被推入主线程
同步任务进入主线程后一直执行，直到主线程空闲时，才会去异步队列中查看是否有可执行的异步任务，如果有就推入主进程中
我们再看一段代码：

setTimeout(() => {
console.log(2)
},1000)

while( true ) {

}

运行结果是： …em，会卡死浏览器

3秒后，setTimeout里的函数被推入异步队列，开始等待主线程空闲的时候去执行，因为主线程被循环卡死，所以永远不会执行setTimeout，这也是为什么我们在日常写代码中，setTimeout的执行时间往往比我们开始设定的时间要长的原因。

3. 如何实现setTimeout的等时循环呢？

for (let i = 0; i < 4; i++) {
let v = i;
setTimeout(() => {
console.log(v);
},i * 1000);
}
//ES5使用闭包
for(var i=1;i<4;i++){
(function(j){
setTimeout(function(){
console.log(j);
},1000*j);
})(i);
}

同样的可以使用setInterval进行调用。

4. 异步任务

setTimeout和setInterval（定时器）
定时器
Promise
有同步任务执行的时候，无论执行什么样的异步任务，都不会读取异步任务队列，这也是当发生循环的时候，用户点击某个按钮无法触发事件，浏览器卡住的原因。

5. 异步任务放入异步队列的时机

执行到异步任务的时候，会直接放到异步队列中吗？答案是不！

首先我们需要看下事件循环的顺序(图片来自node官网)：

从图片中可以看出事件循环：

用户进行输入
开始进行轮询阶段(poll)
check阶段：专门用来执行setImmediate()方法的回调。
close阶段
timer阶段：这个阶段以先进先出的方式执行所有到期的setTimeout或者setInterval函数设置的回调函数。
6.I/O回调：

5.总结

如何理解JS的单线程
什么是Event Loop：
异步任务放入异步队列的时机

• 点赞
• 收藏
• 分享
• 文章举报