跳转至

JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?

你好,我是winter。这一部分我们来讲一讲JavaScript的执行。

首先我们考虑一下,如果我们是浏览器或者Node的开发者,我们该如何使用JavaScript引擎。

当拿到一段JavaScript代码时,浏览器或者Node环境首先要做的就是;传递给JavaScript引擎,并且要求它去执行。

然而,执行JavaScript并非一锤子买卖,宿主环境当遇到一些事件时,会继续把一段代码传递给JavaScript引擎去执行,此外,我们可能还会提供API给JavaScript引擎,比如setTimeout这样的API,它会允许JavaScript在特定的时机执行。

所以,我们首先应该形成一个感性的认知:一个JavaScript引擎会常驻于内存中,它等待着我们(宿主)把JavaScript代码或者函数传递给它执行。

在ES3和更早的版本中,JavaScript本身还没有异步执行代码的能力,这也就意味着,宿主环境传递给JavaScript引擎一段代码,引擎就把代码直接顺次执行了,这个任务也就是宿主发起的任务。

但是,在ES5之后,JavaScript引入了Promise,这样,不需要浏览器的安排,JavaScript引擎本身也可以发起任务了。

由于我们这里主要讲JavaScript语言,那么采纳JSC引擎的术语,我们把宿主发起的任务称为宏观任务,把JavaScript引擎发起的任务称为微观任务。

宏观和微观任务

JavaScript引擎等待宿主环境分配宏观任务,在操作系统中,通常等待的行为都是一个事件循环,所以在Node术语中,也会把这个部分称为事件循环。

不过,术语本身并非我们需要重点讨论的内容,我们在这里把重点放在事件循环的原理上。在底层的C/C++代码中,这个事件循环是一个跑在独立线程中的循环,我们用伪代码来表示,大概是这样的:

while(TRUE) {
    r = wait();
    execute(r);
}

我们可以看到,整个循环做的事情基本上就是反复“等待-执行”。当然,实际的代码中并没有这么简单,还有要判断循环是否结束、宏观任务队列等逻辑,这里为了方便你理解,我就把这些都省略掉了。

这里每次的执行过程,其实都是一个宏观任务。我们可以大概理解:宏观任务的队列就相当于事件循环。

在宏观任务中,JavaScript的Promise还会产生异步代码,JavaScript必须保证这些异步代码在一个宏观任务中完成,因此,每个宏观任务中又包含了一个微观任务队列:

有了宏观任务和微观任务机制,我们就可以实现JavaScript引擎级和宿主级的任务了,例如:Promise永远在队列尾部添加微观任务。setTimeout等宿主API,则会添加宏观任务。

接下来,我们来详细介绍一下Promise。

Promise

Promise是JavaScript语言提供的一种标准化的异步管理方式,它的总体思想是,需要进行io、等待或者其它异步操作的函数,不返回真实结果,而返回一个“承诺”,函数的调用方可以在合适的时机,选择等待这个承诺兑现(通过Promise的then方法的回调)。

Promise的基本用法示例如下:

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            setTimeout(resolve,duration);
        })
    }
    sleep(1000).then( ()=> console.log("finished"));

这段代码定义了一个函数sleep,它的作用是等候传入参数指定的时长。

Promise的then回调是一个异步的执行过程,下面我们就来研究一下Promise函数中的执行顺序,我们来看一段代码示例:

    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });
    r.then(() => console.log("c"));
    console.log("b")

我们执行这段代码后,注意输出的顺序是 a b c。在进入console.log(“b”) 之前,毫无疑问 r 已经得到了resolve,但是Promise的resolve始终是异步操作,所以c无法出现在b之前。

接下来我们试试跟setTimeout混用的Promise。

在这段代码中,我设置了两段互不相干的异步操作:通过setTimeout执行console.log(“d”),通过Promise执行console.log(“c”)。

    var r = new Promise(function(resolve, reject){
        console.log("a");
        resolve()
    });
    setTimeout(()=>console.log("d"), 0)
    r.then(() => console.log("c"));
    console.log("b")

我们发现,不论代码顺序如何,d必定发生在c之后,因为Promise产生的是JavaScript引擎内部的微任务,而setTimeout是浏览器API,它产生宏任务。

为了理解微任务始终先于宏任务,我们设计一个实验:执行一个耗时1秒的Promise。

    setTimeout(()=>console.log("d"), 0)
    var r = new Promise(function(resolve, reject){
        resolve()
    });
    r.then(() => { 
        var begin = Date.now();
        while(Date.now() - begin < 1000);
        console.log("c1") 
        new Promise(function(resolve, reject){
            resolve()
        }).then(() => console.log("c2"))
    });

这里我们强制了1秒的执行耗时,这样,我们可以确保任务c2是在d之后被添加到任务队列。

我们可以看到,即使耗时一秒的c1执行完毕,再enque的c2,仍然先于d执行了,这很好地解释了微任务优先的原理。

通过一系列的实验,我们可以总结一下如何分析异步执行的顺序:

  • 首先我们分析有多少个宏任务;
  • 在每个宏任务中,分析有多少个微任务;
  • 根据调用次序,确定宏任务中的微任务执行次序;
  • 根据宏任务的触发规则和调用次序,确定宏任务的执行次序;
  • 确定整个顺序。

我们再来看一个稍微复杂的例子:

    function sleep(duration) {
        return new Promise(function(resolve, reject) {
            console.log("b");
            setTimeout(resolve,duration);
        })
    }
    console.log("a");
    sleep(5000).then(()=>console.log("c"));

这是一段非常常用的封装方法,利用Promise把setTimeout封装成可以用于异步的函数。

我们首先来看,setTimeout把整个代码分割成了2个宏观任务,这里不论是5秒还是0秒,都是一样的。

第一个宏观任务中,包含了先后同步执行的 console.log(“a”); 和 console.log(“b”);。

setTimeout后,第二个宏观任务执行调用了resolve,然后then中的代码异步得到执行,所以调用了console.log(“c”),最终输出的顺序才是: a b c。

Promise是JavaScript中的一个定义,但是实际编写代码时,我们可以发现,它似乎并不比回调的方式书写更简单,但是从ES6开始,我们有了async/await,这个语法改进跟Promise配合,能够有效地改善代码结构。

新特性:async/await

async/await是ES2016新加入的特性,它提供了用for、if等代码结构来编写异步的方式。它的运行时基础是Promise,面对这种比较新的特性,我们先来看一下基本用法。

async函数必定返回Promise,我们把所有返回Promise的函数都可以认为是异步函数。

async函数是一种特殊语法,特征是在function关键字之前加上async关键字,这样,就定义了一个async函数,我们可以在其中使用await来等待一个Promise。

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function foo(){
    console.log("a")
    await sleep(2000)
    console.log("b")
}

这段代码利用了我们之前定义的sleep函数。在异步函数foo中,我们调用sleep。

async函数强大之处在于,它是可以嵌套的。我们在定义了一批原子操作的情况下,可以利用async函数组合出新的async函数。

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}
async function foo(name){
    await sleep(2000)
    console.log(name)
}
async function foo2(){
    await foo("a");
    await foo("b");
}

这里foo2用await调用了两次异步函数foo,可以看到,如果我们把sleep这样的异步操作放入某一个框架或者库中,使用者几乎不需要了解Promise的概念即可进行异步编程了。

此外,generator/iterator也常常被跟异步一起来讲,我们必须说明 generator/iterator 并非异步代码,只是在缺少async/await的时候,一些框架(最著名的要数co)使用这样的特性来模拟async/await。

但是generator并非被设计成实现异步,所以有了async/await之后,generator/iterator来模拟异步的方法应该被废弃。

结语

在今天的文章里,我们学习了JavaScript执行部分的知识,首先我们学习了JavaScript的宏观任务和微观任务相关的知识。我们把宿主发起的任务称为宏观任务,把JavaScript引擎发起的任务称为微观任务。许多的微观任务的队列组成了宏观任务。

除此之外,我们还展开介绍了用Promise来添加微观任务的方式,并且介绍了async/await这个语法的改进。

最后,留给你一个小练习:我们现在要实现一个红绿灯,把一个圆形div按照绿色3秒,黄色1秒,红色2秒循环改变背景色,你会怎样编写这个代码呢?欢迎你留言讨论。

精选留言(15)
  • 杨学茂 👍(557) 💬(16)

    function sleep(duration){ return new Promise(function(resolve){ setTimeout(resolve, duration); }) } async function changeColor(duration,color){ document.getElementById("traffic-light").style.background = color; await sleep(duration); } async function main(){ while(true){ await changeColor(3000,"green"); await changeColor(1000, "yellow"); await changeColor(2000, "red"); } } main()

    2019-02-23

  • 费马 👍(35) 💬(5)

    const lightEle = document.getElementById('traffic-light'); function changeTrafficLight(color, duration) { return new Promise(function(resolve, reject) { lightEle.style.background = color; setTimeout(resolve, duration); }) } async function trafficScheduler() { await changeTrafficLight('green', 3000); await changeTrafficLight('yellow', 1000); await changeTrafficLight('red', 2000); trafficScheduler(); } trafficScheduler();

    2019-02-23

  • deiphi 👍(33) 💬(8)

    // 比较原始的写法 function color () { console.log('green'); setTimeout(() => { console.log('yellow'); setTimeout(() => { console.log('red'); setTimeout(color, 2000); }, 1000) }, 3000); } color();

    2019-02-26

  • 许吉中 👍(13) 💬(2)

    async/await函数属于宏观还是微观?

    2019-02-24

  • 奥斯特洛夫斯基 👍(12) 💬(1)

    同步的代码和setTimeout都是宏任务?

    2019-02-26

  • 小孔 👍(8) 💬(2)

    1. async/await ,遇到await时就会退出执行,我想问下,退出之后是处于等待await执行完再开始之后吗? 2. 如果promise中产生setTimeout函数,那么在这里的setTimeout是处于微观任务对吗?因为这是js引擎直接发起的?

    2019-04-09

  • 周序猿 👍(4) 💬(1)

    // 另类的写法 var lightDiv = document.getElementById('light') function wait(seconds){ return new Promise((resolve)=>{ setTimeout(resolve,seconds) }) } function light(color, waitTime){ this.color = color this.waitTime = waitTime } light.prototype.run = function(){ lightDiv.style.backgroundColor = this.color return wait(this.waitTime).then(()=>{ return this.nextLight.run() }) } let redLight = new light('red',2000) let yellowLight = new light('yellow',1000) let greenLight = new light('green',3000) redLight.nextLight = greenLight yellowLight.nextLight = redLight greenLight.nextLight = yellowLight redLight.run()

    2019-02-26

  • 不曾潇洒 👍(4) 💬(2)

    老师你好,看了这篇文章后受益匪浅,有个小问题: 在Promise段的最后一个例子中,最后一句代码: sleep(5000).then(()=>{console.log('c')}), 这里面的打印c是属于第一个宏任务还是属于setTime产生的第二个宏任务呢?

    2019-02-23

  • 许童童 👍(4) 💬(6)

    async function controlLoop () { await changeColor('green', 3000) await changeColor('yellow', 1000) await changeColor('red', 2000) await controlLoop() } async function changeColor (color, time) { console.log(color + ' begin') return new Promise((resolve) => { setTimeout(() => { console.log(color + ' end') resolve() }, time) }) } controlLoop()

    2019-02-23

  • 🇨🇳🇨🇳🇨🇳 👍(3) 💬(2)

    async/awiat 只是generator/iterator的语法糖而已

    2019-07-08

  • 大力 👍(3) 💬(1)

    用了async, await后貌似宏观与微观任务分得没那么清晰了。

    2019-06-18

  • Geek_e21f0d 👍(3) 💬(1)

    let lightStates = [{ color: 'green', duration: 3000 }, { color: 'yellow', duration: 1000 }, { color: 'red', duration: 2000 }]; let setLightColorAndVisibleDuration = function(color, duration) { //set light color return new Promise((resolve) => { setTimeout(() => { resolve(); }, duration); }); } let startShowLight = async function() { let index = 0; while(index <= lightStates.length - 1) { let nextState = lightStates[index]; await setLightColorAndVisibleDuration(nextState.color, nextState.duration); index++; } }; startShowLight();

    2019-02-26

  • NeverEver 👍(3) 💬(1)

    我想到的方法是用Recursion。写一个函数setColor,需要一个参数color,函数里首先把div的backgroundColor设置color,然后用setTimeout来设置下一个颜色,根据传入的color相应更改时间和颜色即可

    2019-02-23

  • Geek_55d7cf 👍(2) 💬(1)

    除了setTimeout还有哪些宏观任务呢?

    2019-04-05

  • 阿成 👍(2) 💬(1)

    略简陋... // sleep,green,red,yellow already defined async function main () { while (true) { green() await sleep(3) yellow () await sleep (1) red() await sleep(2) } } main()

    2019-02-23