宏任务和微任务的总结(js队列执行顺序)+ 一点琐事(善待自己)
本周日内容是:宏任务和微任务的总结(js队列执行顺序)+ 一点琐事(善待自己)
前言
之后每次文章都计划是 一点知识点 +生活中一点琐事(我也想做个技术博主,但是能力不足,只能再添加一些生活琐事了)。再次提前声明,如果文章有技术性错误、错别字、或者语义错误的句子,希望您提一下,非常感谢。
js执行队列
宏任务
宏任务:进入一个js文件,js文件中所有的代码就可以看作为宏任务,宏任务是一个执行队列,它中间还可以再包括宏任务和微任务,但是在执行时候,会“挂起”一些后执行的宏任务和微任务。
包括:刚刚进入js文件中的所有js代码、setTimeout、setInterval、XHR回调、鼠标键盘事件等
微任务
微任务:在执行队列中,某队列的宏任务执行完成后,才会执行此队列被挂起的微任务,微任务中也可以包含宏任务和微任务。
包括:Promise.then()函数、process.nextTick函数等。
栗子
console.log("游戏开始",1);
new Promise( (resolve) => {console.log("promise",2);resolve();
})
.then( () => {console.log("then",3);
});
console.log("promise结束",4);
setTimeout( () => {console.log("setTimeout",5);new Promise( (resolve) => {console.log("promise",6);resolve();}).then( () => {console.log("then",7);});
},0);
new Promise( (resolve) => {console.log(promise,8);resolve()
})
.then( () => {console.log(then,9)setTimeout( () => {console.log("setTimeout",10);},0);
})
console.log("游戏结束",11);
好像稍微有点繁琐哈。最好是拿张纸,直接在纸上面进行一个排序和输出(大佬除外)。
牢记代码执行顺序:整体代码(宏任务) -> 整体代码中挂起的微任务 -> 整体代码中挂起的宏任务
代码开始:
第一个宏任务执行:
1、执行第一个宏任务(所有代码)
2、执行第一个console打印:游戏开始,1
3、遇见Promise,执行promise中内容,打印:promise,2 。遇见resolve(),那么则把then函数放在 微任务队列 中
4、继续执行代码,打印:promise结束,4
5、遇见setTimeout函数,将此函数放在 宏任务队列中
6、遇见Promise函数,打印:promise,8。遇见resolve(),那么则把then函数放在 微任务队列 中
7、继续执行代码,打印:游戏结束,11
8、第一次宏任务队列执行完成
第一个微任务执行:
1、执行上图中微任务队列中的第一个,打印:then,3
2、执行上图中微任务队列中的第二个,打印:then,9。然后将setTimeout放在另外一个宏任务队列中(在下次宏任务和微任务结束后执行次宏任务)
3、第一次微任务队列执行完成
第二个宏任务开始执行
1、执行setTimeout,打印:setTimeout,5
2、执行setTimeout中的 Promise, 打印:promise,6。遇见resolve,将then放入微任务中
注意:此时的微任务是setTimeou宏任务中的微任务,故其执行顺序应该在此次完成宏任务之后
3、宏任务执行完成
第二个微任务开始执行
1、执行then函数,打印:then,7
2、第二个微任务执行完成
第三个宏任务开始执行
1、执行setTimeout,打印:setTimeout,10
2、第三个宏任务执行完成
总结:从上而下的队列执行后的打印结果为:
游戏开始,1
promise,2
promise结束,4
promise,8
游戏结束,11
then,3
then,9
setTimeout,5
promise,6
then,7
setTimeout,10
易错点:在第二个宏任务执行中,容易先执行之后的宏任务而导致错误,所以,牢记,每个宏任务执行完成后,一定要限制性其队列中挂起的微任务后,再执行下一个宏任务。
代码部分结束。
一点琐事
昨天,我的一个小伙伴拿到了 阿里巴巴offer + 美团点评offer + 字节跳动offer + 快手offer,其中 网易 的offer好像正在流程。最最关键的是人还漂亮,她老公也还不错,家里两只狗子又憨又可爱…………
再说下去不能活了,我现在就是柠檬精附体,酸的不行不行的了。
大概介绍下吧,她研究生实习和我在一个单位呆过一段时间,然后我换了公司和她联系就很少,只知道她去了另外一公司实习,忘记是阿里还是美团了。
每天能看见她的朋友圈,基本是晒美食+老公,或者是旅游+遛狗+老公,再或者是加班+公司(环境高大上)+不好打车+老公(开车接她)。完全就是90%的人的梦想生活。
但是,也是很平常的生活,最起码我相信她是这么认为的。
说一下我对她的印象吧:温柔、平淡中带着一丝奢华(闪瞎我眼睛的钻戒)、素面朝天(或许应该是天生丽质)、普通;就是一个刚刚毕业的小女孩,没心机,不伪装。嗯,大概就这些吧。(这么简洁,如果你那天看见了,请不要拿榴莲砸我,/狗头保命)
学到的一些东西:
**生活本来就是很简单的一件事情,贫困或者富有,都有自己的一种生活方式。
富有时,不奢侈,不夸张(富有生活经验较少,所以别见怪);
贫困时:我也经历了几年上学时吃不饱没朋友的生活,所以我应该有发言权,从小很少有人和我一起玩,因为我比较孤僻,也时常沉浸在自己的世界里面,渴望更害怕别人进来,更不用说从自己世界出去。这造就了我不合群,也造就了我高中之前几乎没朋友的现状。 **
但是我仍旧感激自己,感激自己 ,没有因为要交朋友,就让自己低人一等,或者让自己刻意讨好他人。这也是我至今在社会上三四年了,仍旧不会做所谓的社会事。
说这些不是卖惨,也不想劝诫所有人要挺直腰板,战斗到底。每个人岗位不一样,做的事情,做事情方式自然不一样。没什么对错,只是为了吃饭而已。
我真正想表达的是,善待自己,善待自己周围的人,善待心里的那个’你’。善待坚持到底,半夜加班,凌晨两点还走在出租房路上,一个人乘坐电梯,或者接起电话会不自觉弯下脊梁的你。
最后,祝那位漂亮的小富婆同学,在你的新公司,好好努力,实在不行就回家继承家产吧。(/狗头再次保命)
完事。。。
雾凇沆砀,天与云与山与水,上下一白,湖上影子,惟长堤一痕、湖心亭一点、与余舟一芥、舟中人两三粒而已
————《湖心亭看雪》
宏任务和微任务的总结(js队列执行顺序)+ 一点琐事(善待自己)相关推荐
- js回调执行顺序,同步任务与异步任务,宏任务与微任务
JS执行顺序 JS是单线程的,即一段时间只能执行一个任务.执行一段代码,js总是按照顺序执行的,只不过在执行的过程中不会等待异步任务. 同步任务与异步任务 同步任务:立即执行的任务,直接被主线程读取并 ...
- ❤️一起谈一谈js中的宏任务和微任务!
前面面试的文章中我们说过一道关于宏任务和微任务的题: setTimeout(function(){console.log('1') });new Promise(function(resolve){c ...
- JS基础知识三:宏任务和微任务
宏任务和微任务 一.宏队列,macrotask,也叫tasks. 一些异步任务的回调会依次进入macro task queue,等待后续被调用 setTimeout setInterval setIm ...
- 弄懂 JavaScript 执行机制,宏任务和微任务
本文的目的就是要保证你彻底弄懂javascript的执行机制. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出 ...
- 阿里一面:熟悉事件循环?那谈谈为什么会分为宏任务和微任务。
什么是事件循环 在了解事件循环前,需要一些有关JS特性的前置知识. JS引擎是单线程的,直白来说就是一个时间点下JS引擎只能去做一件事情,而Java这种多线程语言,可以同时做几件事情. JS做的任务分 ...
- 宏事件、微事件、 JavaScript 执行机制
案例预热: setTimeout(function(){console.log('定时器开始啦')});new Promise(function(resolve){console.log('马上执行f ...
- ajax是宏任务还是微任务,JavaScript的宏任务和微任务
1. JavaScript是单线程语言 JavaScript是一门单线程语言,在最新的html5中提出了web-worker,但是JavaScript是单线程的核心并没有改变. 所有关于JavaScr ...
- js---对事件循环宏任务和微任务的理解
一.JS特点 Js作为一门单线程语言,即一次只能完成一个任务,当有多个任务时,任务就得进行排队等待执行,只能等待自己的前一个任务执行完成后自己才能执行. 二.JS事件循环 要理解JS的事件循环的就必须 ...
- js 异步执行_js执行过程你了解多少?
来公众号:「九零后重庆崽儿」找我,一起学前端. 本文首发在: js执行过程你了解多少? - 重庆崽儿brand的个人主页www.brandhuang.com 文章自己整理自网络,如有问题欢迎在知乎或 ...
最新文章
- 2020年AI产业报告:100个岗位抢1个人,计算机视觉成最大缺口
- 干货 | 目标检测入门,看这篇就够了(上)
- iOS原生定位和反编码
- c语言字符串转64位哈希值,对字符串进行hash处理用什么方法好???
- 一篇深入剖析PCA的好文
- python supervisor_python之supervisor进程管理工具
- nodejs返回html与vue,vuejs和nodejs的区别是什么?
- WebLogic的下载与安装(图文教程)
- 关于Servlet报错:405 HTTP method GET is not supported by this URL问题解决方法
- IntelliJ idea 添加参数
- javascript闭包(Module模式)的用途和高级使用方式
- python简单查询用户
- atat 编译安装测试说明
- html实战解析—折扣计算器生成机制及实例代码
- 如何用photoshop切图并去掉图片上面的文字
- vue实现登录路由跳转到成功页面
- 用python证明角谷猜想_关于角谷猜想的证明
- 在MATLAB中如何读取心音信号,基于Matlab的心音信号分析比较研究_问答库
- Veeam Backup Replication 12 配置信息备份
- 华为防火墙-4-安全策略