JS执行顺序,setTimeout、Promise

最近研究promise，顺便总结下JS执行机制问题。
大家都知道js是单线程，按理说应该是从上到下执行，但有时我们使用了setTimeout还有promise后总会容易对这个机制产生犹豫。下面看一段代码。

setTimeout(() => {
    console.log('setTimeout')
}, 0)

let p1 = new Promise(reslove => {
    let reslove1 = reslove
    setTimeout(() => {
        reslove1('promise 1')
    }, 0)
})

let p2 = new Promise(reslove => {
    reslove('promise 2')
})

let cb = res => console.log(res)
p1.then(cb)
p2.then(cb)
console.log('task')

这个执行后得到的结果为

image.png

这里就不说原因，后面来具体解释为什么会是这样的结果。

关于JS执行，看过一些文章，我这里简单总结一下，可能和很多文章不一样，勿喷，纯属理解。
首先我们先说两个大家常碰到的概念，同步、异步。

同步
什么是同步？举个例子，中午要吃饭了，你妈发现家里没米了，叫你去买米，你花了30分钟买完米，你妈开始洗米煮饭，30分钟饭熟了，然后炒菜，最后又花了30分钟，你才吃上饭。
这里总共花了一个半小时，1：发现没米，叫你去买米，你花了30分钟买米；2：你妈等米来了开始煮饭，花了30分钟；3：炒菜花了30分钟；4：你吃上了香喷喷的米饭。
执行顺序为1-2-3-4,依次执行。看似执行有序，但这一个半小时花的值吗？能不能更早让你吃到香喷喷的米饭呢？
异步
什么是异步呢？还是刚刚那个例子，这里我们小做一下调整，还是没米了，你妈叫你去买米，这个时候你妈开始洗菜炒菜，花了30分钟，你买完米回来，你妈把也菜炒好了，这个时候开始煮饭，30分钟后饭熟了，你吃上香喷喷的米饭。
这里我们发现总共花了一个小时，还是那些步骤，1：发现没米，叫你去买米，你花了30分钟买米；2：你妈等米来了开始煮饭，花了30分钟；3：炒菜花了30分钟；4：你吃上了香喷喷的米饭。
他们的执行顺序是什么样的呢？
其实这里我们就分成了两条线路：
a、1-2
b、3
当这两个都执行完了我们就拿到了结果4。
这里就是异步，a和b同时执行，没有阻塞，a线路1-2这里又形成了同步，当两条线路都执行完后我们去执行4，这里的异步可能讲的会复杂一些，但实际场景很多类似需求。

简单理解同步和异步的区别后我们接下来回到我们主要内容-JS的执行机制。
这里会提到3个东西，主队列、消息队列、任务队列。

主队列就是我们执行的同步进程，这个会被放入主队列中优先执行。
消息队列，比如我们常用的setTimeout这种，JS执行时碰到这种就会放入到消息队列中，等主队列执行完再执行完任务队列后才会执行消息队列。
任务队列，这里说到的就是我们的promise，会被放入任务队列中。
每个队列中执行顺序由上到下。

再来看我们第一段代码

setTimeout(() => {
    console.log('setTimeout')
}, 0)

let p1 = new Promise(reslove => {
    let reslove1 = reslove
    setTimeout(() => {
        reslove1('promise 1')
    }, 0)
})

let p2 = new Promise(reslove => {
    reslove('promise 2')
})

let cb = res => console.log(res)
p1.then(cb)
p2.then(cb)
console.log('task')

那由上到下，我们来看看执行过程，第一个setTimeout会被放入消息队列中，再到p1这个promise会被放入任务队列中，但p1里面又有一个setTimeout，它在p1执行.then的时候又会被放入消息队列中。这里再到p2.then执行的时候会放入任务队列中，最后我们的console.log('task')同步任务就是主队列

image.png

上面这张图就是我们最后得到的结果，然后每个任务依次执行，任务中的子任务依次执行，就是我们最开始的结果。

这里所讲到的主队列、任务队列、消息队列与专业描述有差异，本文主要方便大家理解。

最后编辑于：2019.11.18 11:08:19