JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？
winter
该思维导图由 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
《重学前端》，新⼈⾸单¥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-2316552
费马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-23535
deiphi// 比较原始的写法 function color () { console.log('green'); setTimeout(() => { console.log('yellow'); setTimeout(() => { console.log('red'); setTimeout(color, 2000); }, 1000) }, 3000); } color();作者回复: 哈哈哈 这个硬核了啊…… 结果倒是对的 不试试Promise吗？ 我讲了这么多呢……
2019-02-26833
许吉中async/await函数属于宏观还是微观？作者回复: 它产生Promise，当然是微观任务了
2019-02-24213
奥斯特洛夫斯基同步的代码和setTimeout都是宏任务？作者回复: 应该说一个script标签是一个宏任务。
2019-02-2612
小孔1. async/await ，遇到await时就会退出执行，我想问下，退出之后是处于等待await执行完再开始之后吗？ 2. 如果promise中产生setTimeout函数，那么在这里的setTimeout是处于微观任务对吗？因为这是js引擎直接发起的？作者回复: 1. 对 2. 还是宏观任务，因为你调用到了引擎以外的API呀
2019-04-0928
周序猿// 另类的写法 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-264
不曾潇洒老师你好，看了这篇文章后受益匪浅，有个小问题: 在Promise段的最后一个例子中，最后一句代码: sleep(5000).then(()=>{console.log('c')})， 这里面的打印c是属于第一个宏任务还是属于setTime产生的第二个宏任务呢?作者回复: 属于第二个宏任务，因为它在setTimeout之后执行。
2019-02-2324
许童童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-2364
🇨🇳🇨🇳🇨🇳async/awiat 只是generator/iterator的语法糖而已作者回复: 这不是胡说呢么。
2019-07-0823
收起评论