先以一道面试题做引子:

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

        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. 06Shell并发控制

    并发控制 文件描述 文件句柄 File Descriptors (FD,文件描述符)或 文件句柄: 进程使用文件描述符来管理打开的文件 注意 1.如何通过exec打开一个文件 exec 数字<& ...

  2. 【shell脚本】自动监控tomcat服务===autoCheck.sh

    自动监控tomcat服务,当tommcat服务挂掉时自动重启 一.脚本内容 [root@localhost ]# cat /root/autoCheck.sh #!/bin/bash startTom ...

  3. 动画展现十大经典排序算法(附Java代码)

    0.算法概述 0.1 算法分类 十种常见排序算法可以分为两大类: 比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此也称为非线性时间比较类排序. 非比较类排序: ...

  4. VS2019已还原ReSharper的功能

    本文只谈论 ReSharper 的那些常用功能中,Visual Studio 2019 能还原多少,主要提供给那些正在考虑不使用 ReSharper 插件的 Visual Studio 用户作为参考. ...

  5. MDT rules实用

    [Settings]Priority=DefaultProperties=MyCustomProperty [Default]OSInstall=YSkipBDDWelcome=YESSkipCapt ...

  6. 本机与虚拟机Ping不通

    关闭防火墙,设置虚拟机和本机在同一网段,还是ping不同 解决方法:在VMware中点击 编辑---->虚拟网络编辑器----->更改设置 ------->还原默认设置 然后重新配置 ...

  7. CentOS7 vsftp 安装与配置(视频教程)

    (双击全屏播放) 1.安装vsftpd yum install -y vsftpd 2.编辑ftp配置文件 vi /etc/vsftpd/vsftpd.conf anonymous_enable=NO ...

  8. Ansible varialbes

    1.什么是变量? ​ 以一个固定的字符串,表示一个不固定的值 version: 1.12 2.定义变量? 1.在playbook中定义变量? vars 关键字 [root@manager projec ...

  9. FCC-学习笔记 Convert HTML Entities

    FCC-学习笔记  Convert HTML Entities 1>最近在学习和练习FCC的题目.这个真的比较的好,推荐给大家. 2>中文版的地址:https://www.freecode ...

  10. python基础-内置函数 isinstance() 与 issubclass()

    面向对象编程之内置函数 isinstance() 与 issubclass() isinstance():判断一个对象是否是另一个类的实例.返回bool值,True表示是,False表示不是. 语法: ...