先以一道面试题做引子:

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

        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. flink 注册函数示例

    需求 (filter): 现在有这么一个需求,统计出现在纽约的行车记录.这里我们需要进行一个过滤的操作,我们需要有个自定义的 UDF ,具体思路是,表里面有经度和维度这两个字段,通过这个可以来开发一个 ...

  2. .NET Core 2.1 以下的控制台应用程序生成 EXE,且使用命令行参数动态运行控制器应用程序的示例

    文章: https://stackoverflow.com/questions/44038847/vs2017-compile-netcoreapp-as-exe 引用 <ItemGroup&g ...

  3. 解决Git 克隆代码 The remote end hung up unexpectedly错误

    从GitHub上克隆一个项目一直不成功!猜想可能是文件太大超时或者网络太慢超时! 解决方案: 配置 git config -- git config -- 增加最低速时间,but,还是不行! 公司网络 ...

  4. 阿里云(百度云)Linux系统挂载磁盘

    阿里云(百度云)Linux系统挂载磁盘

  5. JQuery 遍历table中的checkbox 并对行数据进行校验

    JQuery中confirm的使用 $(document).ready(function () { $("#Btn_Print").click(function () { var ...

  6. JavaScript Date 日期属性和方法

    JavaScript 日期(Date) Date对象用于处理日期和时间.使用对象new Date()创建日期.实例化日期有四种方式: var d1 = new Date(); var d2 = new ...

  7. LR实现处理PUT方法的案例

  8. 绕过基于签名的XSS筛选器:修改HTML

    绕过基于签名的XSS筛选器:修改HTML 在很多情况下,您可能会发现基于签名的过滤器只需切换到一个不太熟悉的执行脚本的方法即可.如果失败了,您需要查看混淆攻击的方法. 本文提供了HTML语法可以被混淆 ...

  9. maven 学习---NetBeans IDE集成Maven

    NetBeans6.7更新版本已经内置对Maven支持.如遇以前的版本,Maven插件在插件管理器中可用.我们正在使用NetBeans在这个例子中使用6.9. 在NetBeans一些特点如下 您可以从 ...

  10. Qt我的文档 桌面路径

    我的文档 QString location = QStandardPaths::writableLocation(QStandardPaths::DocumentsLocation); 桌面 QStr ...