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
  有同步任务执行的时候，无论执行什么样的异步任务，都不会读取异步任务队列，这也是当发生循环的时候，用户点击某个按钮无法触发事件，浏览器卡住的原因。

  
  图片自Philip Roberts的演讲《Help, I'm stuck in an event-loop》

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

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

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

屏幕快照 2018-10-02 下午9.51.48.png

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

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

5.总结

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