宏任务和微任务:setTimeout和Promise执行顺序
先以一道面试题做引子:
写出这段程序的输出内容:
setTimeout(function(){
console.log();
},);
new Promise(function(a,b){
console.log();
for(var i=;i<;i++){
i==&&a();
}
console.log()
}).then(function(){
console.log()
});
console.log();
如果你看了这道题不知道怎么下手,或者发现结果和自己的答案大相径庭,请继续往下看
1. javascript事件循环
首先,你要知道javascript是单线程语言。js任务需要排队顺序执行,如果一个任务耗时过长,后边一个任务也的等着,但是,假如我们需要浏览新闻,但新闻包含的超清图片加载很慢,总不能网页一直卡着直到图片完全出来,所以将任务设计成了两类:
同步任务
异步任务
当我们打开网站时,网页的渲染过程就是一大堆同步任务,像页面骨架和页面元素的渲染,而加载图片、音乐之类的任务就是异步任务,看一下下边导图:
如图:

同步和异步任务分别进入不同的执行“场所”,同步进入主线程,异步进入Event Table并注册函数。当指定的事情完成时,Event Table会将这个函数移入Event Queue。主线程内的任务执行完毕为空,回去了Event Queue读取对应的函数,进入主线程。
上述过程会不断重复,也就是常说的Event Loop(事件循环)。
但是,JS异步还有一个机制,就是遇到宏任务,先执行宏任务,将宏任务放入event queue,然后再执行微任务,将微任务放入eventqueue,但是,这两个queue不是一个queue。当你往外拿的时候先从微任务里拿这个回调函数,然后再从宏任务的queue拿宏任务的回调函数,如下图:

宏任务一般包括:整体代码script,setTimeout,setInterval。
微任务:Promise,process.nextTick
参考文章: Javascript执行机制
宏任务和微任务:setTimeout和Promise执行顺序的更多相关文章
- js 关于setTimeout和Promise执行顺序问题
js 关于setTimeout和Promise执行顺序问题 异步 -- Promise和setTimeout 执行顺序 Promise 和 setTimeout 到底谁先执行 定时器的介绍 Jav ...
- 关于setTimeout和Promise执行顺序问题
先看一段代码 console.log('打印'+1); setTimeout(function(){ console.log('打印'+2); }) new Promise(function(reso ...
- 再次聊一聊promise settimeout asycn awiat执行顺序---js执行机制 EVENT LOOP
首先js是单线程 分为同步和异步,异步又分为(macrotask 宏任务 和 microtask微任务 ), 这图还是很清晰嘛,再来一张 总结一下,就是遇到同步先执行同步,异步的丢到一边依次排队,先排 ...
- JS中For循环中嵌套setTimeout()方法的执行顺序
在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...
- Promise 执行顺序
加深印象 setTimeout(function() { console.log("timeout-start"); }, 200) // 改为100呢 console.log(& ...
- js,timeout,promise执行顺序
总结 macro-task包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering. micro-task包括 ...
- 多个Promise执行顺序
app.isLogin() // 判断是否登录后 .then(res=>{ this.setData({ login: true }, res2=>{ // 清空临时积分 return a ...
- setTimeout,promise,promise.then, async,await执行顺序问题
今天下午看了好多关于这些执行顺序的问题 经过自己的实践 终于理解了 记录一下就拿网上出现频繁的代码来说: async function async1() { console.log('async1 ...
- Promise对象及它在js中的执行顺序
关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...
随机推荐
- [线段树]区间修改&区间查询问题
区间修改&区间查询问题 [引言]信息学奥赛中常见有区间操作问题,这种类型的题目一般数据规模极大,无法用简单的模拟通过,因此本篇论文将讨论关于可以实现区间修改和区间查询的一部分算法的优越与否. ...
- F#周报2019年第18期
新闻 FableConf 2019开始征集提案 2019理事会选举 如同DSL一般的Elmish封装器fable-elmish,可以创建控制台或者终端界面 介绍VS Code的远程开发 F#(.NET ...
- 【10】Nginx:后面有无 / 的区别
写在前面的话 在 nginx 中,我们很多时候都有一个疑问,在 proxy_pass 或者 root 或者 location 后面需不需要加上 /,加和不加有啥区别. root / alias 后面 ...
- Nginx的相关问题
1.什么是Nginx的虚拟主机? 答:虚拟主机是一种特殊的软硬件技术,它可以将网络上的每一台计算机分成多个虚拟主机,每个虚拟主机可以独立对外提供www服务,这样就可以实现一台主机对外提供多个web服务 ...
- RabbitMQ系列(一)rabbitmq简介
------------恢复内容开始------------ 参考:https://www.cnblogs.com/vipstone/p/9275256.html RabbitMQ简介 在介绍Rabb ...
- JavaScript 设计模式分类
设计模式的目的是为了提高代码的整洁性.降低代码的资源占用量. JS中的设计模式可分为以下三种: 1. 创建型设计模式 说明:专注于处理对象创建的机制,以合适的方式创建对象,以此来降低创建对象过程的复杂 ...
- 打印X
***.....***// .***...***.// ..***.***..// ...*****...// ....***....// ...*****...// ...
- yii2 HeadersAlreadySentException 报错
An Error occurred while handling another error:exception 'yii\web\HeadersAlreadySentException' with ...
- Java中级知识归纳(四)
十六.Java内存模型 特点:原子性.可见性.有序性. 原子性:read.load.use.store.write.synchronized关键字保证原子性 可见性:synchronized.vola ...
- 十:装饰器模式(io流)
定义:装饰模式是在不必改变原类文件和使用继承的情况下,动态的扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 这一个解释,引自百度百科,我们 ...