重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

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

嵌套的异步函数
基本用法
异步执行顺序
基本用法
异步管理方式
微观任务队列
宏观任务队列
事件循环
小练习
总结
generator/iterator
async/await
Promise
宏观和微观任务
结语
JavaScript执行

该思维导图由 AI 生成,仅供参考

你好,我是 winter。这一部分我们来讲一讲 JavaScript 的执行。
首先我们考虑一下,如果我们是浏览器或者 Node 的开发者,我们该如何使用 JavaScript 引擎。
当拿到一段 JavaScript 代码时,浏览器或者 Node 环境首先要做的就是;传递给 JavaScript 引擎,并且要求它去执行。
然而,执行 JavaScript 并非一锤子买卖,宿主环境当遇到一些事件时,会继续把一段代码传递给 JavaScript 引擎去执行,此外,我们可能还会提供 API 给 JavaScript 引擎,比如 setTimeout 这样的 API,它会允许 JavaScript 在特定的时机执行。
所以,我们首先应该形成一个感性的认知:一个 JavaScript 引擎会常驻于内存中,它等待着我们(宿主)把 JavaScript 代码或者函数传递给它执行。
在 ES3 和更早的版本中,JavaScript 本身还没有异步执行代码的能力,这也就意味着,宿主环境传递给 JavaScript 引擎一段代码,引擎就把代码直接顺次执行了,这个任务也就是宿主发起的任务。
但是,在 ES5 之后,JavaScript 引入了 Promise,这样,不需要浏览器的安排,JavaScript 引擎本身也可以发起任务了。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

JavaScript执行(一):Promise里的代码为什么比setTimeout先执行? 本文介绍了JavaScript执行的机制,从宏观任务和微观任务的概念入手,详细解释了事件循环的原理。文章重点介绍了Promise的使用方法和执行顺序,通过示例代码展示了Promise中resolve的异步操作和与setTimeout混用的情况。此外,还介绍了ES2016新增的特性async/await,以及其基本用法和嵌套应用。最后,留下了一个小练习,引发读者思考。 文章深入浅出地解释了JavaScript执行机制的原理,通过实例代码生动展示了Promise和async/await的使用方式,使读者能够快速了解并掌握这些技术特点。同时,通过留下小练习,激发了读者的思考和讨论,为读者提供了一个互动的学习机会。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(185)

  • 最新
  • 精选
  • 杨学茂
    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
    16
    552
  • 费马
    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();

    作者回复: 这个写的不错,不过,既然都用到了await,是不是可以不用递归呢?

    2019-02-23
    5
    35
  • deiphi
    // 比较原始的写法 function color () { console.log('green'); setTimeout(() => { console.log('yellow'); setTimeout(() => { console.log('red'); setTimeout(color, 2000); }, 1000) }, 3000); } color();

    作者回复: 哈哈哈 这个硬核了啊…… 结果倒是对的 不试试Promise吗? 我讲了这么多呢……

    2019-02-26
    8
    33
  • 许吉中
    async/await函数属于宏观还是微观?

    作者回复: 它产生Promise,当然是微观任务了

    2019-02-24
    2
    13
  • 奥斯特洛夫斯基
    同步的代码和setTimeout都是宏任务?

    作者回复: 应该说一个script标签是一个宏任务。

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

    作者回复: 1. 对 2. 还是宏观任务,因为你调用到了引擎以外的API呀

    2019-04-09
    2
    8
  • 周序猿
    // 另类的写法 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
  • 不曾潇洒
    老师你好,看了这篇文章后受益匪浅,有个小问题: 在Promise段的最后一个例子中,最后一句代码: sleep(5000).then(()=>{console.log('c')}), 这里面的打印c是属于第一个宏任务还是属于setTime产生的第二个宏任务呢?

    作者回复: 属于第二个宏任务,因为它在setTimeout之后执行。

    2019-02-23
    2
    4
  • 许童童
    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
    6
    4
  • 🇨🇳🇨🇳🇨🇳
    async/awiat 只是generator/iterator的语法糖而已

    作者回复: 这不是胡说呢么。

    2019-07-08
    2
    3
收起评论
显示
设置
留言
99+
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部