js 宏任务,微任务

在了解async之后,发现一个自己不是很熟悉的点儿,在这儿记录一下

js 中存在宏任务和微任务,js 的执行顺序是 一个宏任务执行结束之后才会去执行下一个宏任务,微任务是在本宏任务的主要的任务结束之后,再去执行微任务,当所有的微任务结束之后,这个宏任务也就算执行结束了,值的注意的是,script 就是一个大的宏任务
   先分类:
       宏任务  srcipt > setImmediate  > messageChannel > setTimeout/setInterval
       微任务  promise相关的  reslove 里边的

举例说明
      <script>

console.log("1")
            setTimeout(function() {console.log(‘2‘)}, 0)
            new Promise(function (resolve) {
                console.log(‘3‘)
                resolve() 
            }).then( function() {
                console.log(‘4‘)

})

console.log(‘5‘)

</script>

结果会是   1  3  5  4   2

因为script 和 setTimeout 都是宏任务,所以setTimeout 会在script 结束之后执行,所以 2 的最后的
      then 是微任务,要等宏任务的主线任务结束之后执行,所以会 是先3 ,然后跳出 执行 5, 5完成之后,宏任务的主线完成
      开始执行微任务  then , 打印  4 ,之后,宏任务结束,开始执行另一个宏任务,也就是 setTimeout , 打印 2

原文地址:https://www.cnblogs.com/mumu-web/p/10148569.html

时间: 2024-11-09 00:41:48

js 宏任务,微任务的相关文章

js 宏任务和微任务

1.概念:宏任务(macrotask )和微任务(microtask ) 表示异步任务的两种分类.常见宏任务:I/O .setTimeout.setInterval:微任务:Promise.then catch finally.process.nextTick 在挂起任务时,JS 引擎会将 所有任务 按照类别分到这两个队列中, 首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行: 之后再取 m

$nextTick 宏任务 微任务 macrotasks microtasks

1.nextTick调用方法 首先看nextTick的调用方法: https://cn.vuejs.org/v2/api/#Vue-nextTick // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) // 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示) Vue.nextTick() .then(function () { // DOM 更新了 }) 即:既可以支持

springcloud vue.js 前后分离 微服务 分布式 activiti工作流 集成代码生成器 shiro权限

1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2.多数据源:(支持同时连接无数个数据库,可以不同的模块连接不同数的据库)支持N个数据源3.阿里数据库连接池druid,安全权限框架 shiro(菜单权限和按钮权限), 缓存框架 ehcache4.代码编辑器,在线模版编辑,仿开发工具编辑器5.调用摄像头拍照 自定义裁剪编辑头像,头像图片色度调节6.we

从无到有构建亿级电商微服务优惠劵系统(真实工业界案例)

课程下载地址:https://pan.baidu.com/s/1SXaN8m38UWfRzyUGgVIazA 提取码:hsf0 本课程包含的技术:课程所用的开发环境为:Window7 开发工具是:IDEA Webstorm 本课程包含的技术:Spring Boot版本:2.0.2.RELEASESpring-Cloud版本:Finchley.RELEASEVue.js.Nodejs.Webpack. Maven.Nginx分布式部署.负载均衡等 优惠券作为一种常见的促销手段,其本质是经济学中的价

事件循环(Event Loop)

1.什么是事件循环? JavaScript为单线程执行的,所以是从上到下依次执行,js分为两个任务,宏任务和微任务 首先执行宏任务(第一次就是执行所有的同步代码),再执行所有的微任务,执行完毕之后再次执行 宏任务,执行完毕再次执行所有的微任务,也就是: 宏任务 --> 微任务  -->  宏任务 -->  微任务 2.什么是宏任务,微任务? 宏任务: script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI renderin

前端知识体系(一)浏览器机制以及进程线程的关系

看了一篇大神的博客,对前端学习体系突然明悟了起来.于是准备参考着大神的脚步开始体系化的学习.博客链接:https://segmentfault.com/a/1190000013662126. 很多时候被问到从输入url地址之后,会发生什么?很多时候回答都很笼统,没有自己的核心,所以学习一下大神的思路,以下总结的只是骨干,只有将每一个部分都学习到,这样才是一个知识体系,才能很好的理解上下结构与关系. 1. 从浏览器接收url到开启网络请求线程(这一部分可以展开浏览器的机制以及进程与线程之间的关系)

前端面经(待整理)

http http相关没有特别难的,常见的了解下就没问题. 介绍Http2,优点和存在什么坑或问题(必考) HTTP报文的请求和返回会有几个部分(请求行.请求头.请求体):每部分具体都有什么(常见的请求头) GET和POST的区别 输入url到页面加载全过程(必考) 介绍HTTPS:HTTP和HTTPS的区别(必考) HTTPS加密过程 HTTP缓存控制(强缓存.弱缓存):缓存相关的HTTP请求头(必考) 对跨域的了解,跨域怎么解决(必考) cors的返回头.cors预请求,什么时候会出发预请求

浏览器中的JavaScript事件循环机制

浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中的顶部,执行完成之后就从栈的顶部移除该函数,直到栈内被清空. 同步任务.异步任务 JS单线程任务分为同步任务和异步任务.同步任务会在调用栈中按照顺序排队等待主线程执行,异步任务则会在异步有了结果之后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候,也就是栈内被清空的时候,被读取到栈中

关于async/await、promise和setTimeout执行顺序

先来一道关于async/await.promise和setTimeout的执行顺序的题目: 1 async function async1() { 2 console.log('async1 start'); 3 await async2(); 4 console.log('asnyc1 end'); 5 } 6 async function async2() { 7 console.log('async2'); 8 } 9 console.log('script start'); 10 set