宏任务和微任务: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对象提供一些接口的方法,返回一 ...
随机推荐
- flink 注册函数示例
需求 (filter): 现在有这么一个需求,统计出现在纽约的行车记录.这里我们需要进行一个过滤的操作,我们需要有个自定义的 UDF ,具体思路是,表里面有经度和维度这两个字段,通过这个可以来开发一个 ...
- Java单元测试简述
最开始项目中是没有单元测试的,基本都是自己通过各种方式来实现测试的.比如修改代码,测完再改回来:再比如直接模拟用户操作,直接当黑盒测试,然后自己去看相应的逻辑有没有,状态有没有改变. 这些方式有几个缺 ...
- windows 安装gitea
gitea 地址https://github.com/go-gitea/gitea windows 安装
- Python语言获取目录下所有文件
#coding=utf-8# -*- coding: utf-8 -*-import osimport sysreload(sys) sys.setdefaultencoding('utf-8') d ...
- QT 使用QSetting读取配置文件中的中文乱码解决方案
windows下方案: 首先需要将ini文件改成UTF-8或GB2312编码格式,可以通过notepad++工具实现.然后在配置项中填入中文,如下: 接着在程序中使用 QSettings settin ...
- centos通过yum快速安装JDK1.8
centos通过yum快速安装JDK1.8检索1.8的列表:yum list java-1.8*安装1.8.0的所有文件:yum install java-1.8.0-openjdk* -y 出现 C ...
- CTF必备技能丨Linux Pwn入门教程——ROP技术(下)
Linux Pwn入门教程系列分享如约而至,本套课程是作者依据i春秋Pwn入门课程中的技术分类,并结合近几年赛事中出现的题目和文章整理出一份相对完整的Linux Pwn教程. 教程仅针对i386/am ...
- chattr lsattr文件隐藏属性
chattr [-RV][-v<版本编号>][+/-/=<属性>][文件或目录...] lsattr [-adlRvV][文件或目录...] 改变/显示文件隐藏属性 chatt ...
- 【android】关于call拨号功能实现的记录
前几天考试居然记错dial和call,故在此写上小demo来作区别,加深印象. 主要是实现call(拨通电话)功能,dial(拨电话)功能用作对比,话不多说,贴上代码. 1.创建布局文件如下: < ...
- flink Periodic Watermarks 自定义周期性水印
1.BoundedOutOfOrdernessGenerator /** * This generator generates watermarks assuming that elements ar ...