美文网首页
JS执行顺序,setTimeout、Promise

JS执行顺序,setTimeout、Promise

作者: 石豌豆 | 来源:发表于2019-11-18 11:01 被阅读0次

最近研究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

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

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

相关文章

网友评论

      本文标题:JS执行顺序,setTimeout、Promise

      本文链接:https://www.haomeiwen.com/subject/zosvictx.html