先以一道面试题做引子:

写出这段程序的输出内容:

        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执行顺序的更多相关文章

  1. js 关于setTimeout和Promise执行顺序问题

    js 关于setTimeout和Promise执行顺序问题 异步 -- Promise和setTimeout 执行顺序   Promise 和 setTimeout 到底谁先执行 定时器的介绍 Jav ...

  2. 关于setTimeout和Promise执行顺序问题

    先看一段代码 console.log('打印'+1); setTimeout(function(){ console.log('打印'+2); }) new Promise(function(reso ...

  3. 再次聊一聊promise settimeout asycn awiat执行顺序---js执行机制 EVENT LOOP

    首先js是单线程 分为同步和异步,异步又分为(macrotask 宏任务 和 microtask微任务 ), 这图还是很清晰嘛,再来一张 总结一下,就是遇到同步先执行同步,异步的丢到一边依次排队,先排 ...

  4. JS中For循环中嵌套setTimeout()方法的执行顺序

    在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...

  5. Promise 执行顺序

    加深印象 setTimeout(function() { console.log("timeout-start"); }, 200) // 改为100呢 console.log(& ...

  6. js,timeout,promise执行顺序

    总结 macro-task包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering. micro-task包括 ...

  7. 多个Promise执行顺序

    app.isLogin() // 判断是否登录后 .then(res=>{ this.setData({ login: true }, res2=>{ // 清空临时积分 return a ...

  8. setTimeout,promise,promise.then, async,await执行顺序问题

    今天下午看了好多关于这些执行顺序的问题  经过自己的实践 终于理解了  记录一下就拿网上出现频繁的代码来说: async function async1() { console.log('async1 ...

  9. Promise对象及它在js中的执行顺序

    关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...

随机推荐

  1. Windows7运行python3,提示缺少api-ms-win-crt-runtime-l1-1.0.dll

    一.实验环境 1.Windows7x64_SP1 二.操作步骤 2.1 python官网下载python3.6后,安装.运行,提示如下错误: 2.2 解决方式 去微软官网下载安装:KB2999226补 ...

  2. Uboot启动流程分析(三)

    1.前言 在前面的文章Uboot启动流程分析(二)中,链接如下: https://www.cnblogs.com/Cqlismy/p/12002764.html 已经对_main函数的整个大体调用流程 ...

  3. 关于使用IDEA,使用Maven打包项目

    关于使用IDEA,使用Maven打包项目 在近期的一个接口项目中,使用的是SpringBoot + Maven的配置, 由于使用IDEA不久,不太熟悉使用Maven进行项目打包.记录一下. 由于使用的 ...

  4. 离线缓存 Visual Studio 2019 (VS2019)的方法

    1. 下面是以管理员身份运行命令行: https://docs.microsoft.com/en-us/visualstudio/install/workload-component-id-vs-en ...

  5. Serverless 的喧哗与骚动(一)附Serverless行业发展回顾

    作者 | 阿里中间件高级技术专家 许晓斌 <Maven实战>作者,曾负责 AliExpress 微服务架构演进,现在负责阿里集团 Serverless 技术研发落地. 导读:从 2016 ...

  6. KVM学习笔记--静态迁移

    .静态迁移过程如下 (1)确定虚拟机关闭状态 (2)准备迁移oeltest02虚拟机,查看该虚拟机配置的磁盘文件 (3)导入虚拟机配置文件 [root@node1~]# virsh dumpxml o ...

  7. SpringBoot与Swagger整合

    1 SpringBoot与Swagger整合https://blog.csdn.net/jamieblue1/article/details/99847744 2 Swagger详解(SpringBo ...

  8. PIE属性表多字段的文本绘制

    最近研究了PIE SDK文本元素的绘制相关内容,因为在我们的开发中,希望可以做到在打开一个Shp文件后,读取到属性表的所有字段,然后可以选择一些需要的字段,将这些字段的所有要素值的文本,绘制到shp图 ...

  9. body的背景

    body的背景 背景background-color:默认border-box 画布canvas 一块区域 背景background-color的画布的特点:(画布大于等于视口) 最小宽度视口宽度 最 ...

  10. iframe子元素无法全屏

    最近做的项目中遇到的问题: 在最新的Chrome浏览器中,全屏功能正常 在旧版本Chrome浏览器中(与最新版版本号相差二十左右),全屏功能无效 在IE11浏览器中,全屏功能无效 反复排查,发现该项目 ...