宏任务和微任务: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对象提供一些接口的方法,返回一 ...
随机推荐
- 原生js实现append()方法
一.在使用jquery时,append() 方法在被选元素的结尾(仍然在内部)插入指定内容 使用方法:$(selector).append(content),content为必需的.规定要插入的内容( ...
- set -x 与 set +x
set -x 与 set +x 在liunx脚本中可用set -x就可有详细的日志输出.免的老是要echo了 下面的网上搜来的用法. 用于脚本调试.set是把它下面的命令打印到屏幕set -x 是开启 ...
- LeetCode 21:合并两个有序链表 Merge Two Sorted Lists
将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. Merge two sorted linked lists and return it as a new ...
- Python 多进程池
def get_html(n): time.sleep(n) print("sub_progress success") return n # 多进程池 pool = multip ...
- Zabbix邮件预警-这个坑我跳了不止一次
文章 Github 地址:点我 每每碰到 Zabbix,我发现配置邮件预警这个坑,我必须要跳进去,跟它是有八辈子的仇哦,哎,接下来数数这些坑.看看你遇到过类似的吗? Zabbix 预警配置流程 监控项 ...
- ConsoleColor原来有16种, enumData.GetValue(i)
Console.WriteLine("Name:{0},Value:{0:D}", enumData.GetValue(i)); Name:Black,Value:0Name:Da ...
- 引用kernel32.dll中的API来进行串口通讯
串口通讯可以引出kernel32.dll中的API来操作,相关源码如下:using System;using System.Runtime.InteropServices; namespace Tel ...
- python常用库简单使用( PyPDF2 )
PyPDF2学习 1 这个模块的名字对大小写是敏感的,所以,确保y是小写的,其他字母都是大写的
- C# 去除数字中多于的0
decimal i = decimal.Parse(Console.ReadLine()); Console.WriteLine((i).ToString(")); Console.Writ ...
- strace命令 系统调用
简介 strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式切换至内核 ...