JS高级学习笔记(6)- 事件循环

参考文章:深入理解JS引擎的执行机制        JavaScript 异步、栈、事件循环、任务队列

我的笔记:ES系列之Promise async 和 await

Event Loop

前提

  • js是单线程的

  • js的Event Loop是JS的执行机制,深入了解JS的执行,就等于深入了解JS里的event loop。

问:js是为单线程的,为什么要实现异步,单线程怎么实现异步?

答:1、js的单线程能够保证对DOM操作的顺序性,如果是多线程,A线程编辑DOM上的内容,B线程删除该DOM,那么,浏览器该怎么执行了。

2、因为js是自上而下执行的,如果上一行解析很长时间,下面的代码解析不了,造成页面卡死。

3、通过事件循环机制实现异步

js的Event Loop1

demo1

console.log(1)setTimeout(function () {console.log(2)
}, 0)console.log(3)

执行结果:1 3 2

首先我们知道,js将任务分为同步任务异步任务

js的执行机制:

判断当前执行代码是同步还是异步的,同步就进入主线程执行,异步就放到event table

然后异步任务在event loop中注册函数,当满足条件后,就被推进event queue

同步任务进入主线程一直执行,知道主线程空闲时,才会去event queue中查看是否有客执行的异步任务,如果有就推入主线程中。

 

js的Event Loop2

<script>
console.log('1');
setTimeout(function(){console.log('2')
});new Promise(function(resolve){console.log('3');for(var i = 0; i < 10000; i++){i == 99 && resolve();}
}).then(function(){console.log('4')
});console.log('5');
</script>

按照上面的分析,执行顺序为:1 5 2 3 4;但是实际的执行顺序为:1 3 5 4 2

这是为什么呢?

这是因为,js将任务分为宏任务(macro-task)微任务(micro-task)

宏任务包括:script标签、setTimeout、setInterval

微任务包括:Promise,process.nextTick

 

  1. 执行到script标签进入宏任务,然后执行

  2. setTimeout为宏任务,放在任务队列中,等待该宏任务以及该宏任务中的微任务执行完毕后执行

  3. Promise准备开启微任务,但是没有开启,.then()进入微任务,等待该宏任务执行完毕后执行该微任务

setTimeout

 setTimeout(function(){console.log('执行了')},3000)   

我们一般说以上代码会在3s后执行,但是准确的解释是: 3秒后,setTimeout里的函数被会推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行。

如果主线程执行了5s,那么以上代码会在5s,以及事件队列的前面的微任务执行完毕后执行。

转载于:https://www.cnblogs.com/houfee/p/10550406.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/483916.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[美]杰克·巴尔金:算法社会中的三大法则

杰克巴尔金&#xff1a;耶鲁大学奈特宪法与第一修正案讲席教授&#xff0c;耶鲁大学法学院信息社会项目主任。来源&#xff1a;数字法治译者&#xff1a;刘颖&#xff0c;同济大学法学院助理教授、硕士生导师&#xff0c;法学博士。陈瑶瑶&#xff0c;上海大学法学院硕士研究生…

Vue快速入门笔记(一)

文章目录一、Vue基础1、第一个Vue程序2、el&#xff1a;挂载点3、data&#xff1a;数据对象二、模板语法1、v-once2、v-html3、v-bind4、v-text5、v-on三、计算属性和侦听器1、计算属性2、侦听器四、Class与Style绑定1、绑定HTML Class2、绑定内联样式五、条件渲染1、v-if2、v-…

CentOS7完成mysql的安装和远程访问

详见链接https://blog.csdn.net/weixin_42266606/article/details/80879571 &#xff08;此处我的本地用户名root,密码root&#xff1b;远程用户名root,密码12345&#xff09; 1.下载 MySQL 所需要的安装包 网址&#xff1a;https://dev.mysql.com/downloads/mysql/ 2.Select O…

维特根斯坦:为何夸大人工智能是对人性的贬损?

© Semantics3来源&#xff1a;利维坦文&#xff1a;Steven Gambardella译&#xff1a;苦山校对&#xff1a;兔子的凌波微步原文&#xff1a;medium.com/stevengambardella/wittgenstein-intelligence-is-never-artificial-51933315d1bd利维坦按&#xff1a;众所周知&#…

哔哩哔哩n倍速播放视频

在b站看一些学习视频的时候&#xff0c;有时候2倍速满足不了我们的需求&#xff0c;可以在控制台键入以下命令实现n倍速播放视频 document.querySelector(video).playbackRate 3

虚拟机的ip地址为什么会发生变化

因为虚拟机在NAT模式下由Vmware8虚拟网卡提供虚拟机的IP分配&#xff0c;网桥模式下由Vmware1来提供IP分配。它们都相当于 一个小型的DHCP服务器&#xff0c;除非改动虚拟机的网络连接方式&#xff0c;或动了虚拟网卡服务属性&#xff0c;那么虚拟机的IP租约过期后&#xff0c;…

法国数学到底有多厉害?

来源&#xff1a;盘古论市、EETOP等引子在德国数学家高斯的一部传记中&#xff0c;作者引用了下面这段话&#xff1a;有一个异乡人在巴黎问当地人&#xff0c;“为什么贵国历史上出了那么多伟大的数学家&#xff1f;”巴黎人回答&#xff0c;“我们最优秀的人学习数学。”又去问…

DevExpress破解和消除弹出框问题

在解决方案管理器列表中找到 license.licx 设置属性 将[生成操作]选项改为[无] 转载于:https://www.cnblogs.com/sinceret/p/10556243.html

Linux下进入Anaconda Prompt以及Navigator

同个人网站 https://www.serendipper-x.cn/&#xff0c;欢迎访问 &#xff01; 一、进入Anaconda Promp 打开终端&#xff0c;cd 进Anaconda下的bin目录 conda activate退出 conda deactivate二、进入Anaconda Navigator anaconda-navigator

放心,GPT-3不会“杀死”编程

来源&#xff1a;towardsdatascience.com作者&#xff1a;Alberto Romero译者&#xff1a;朱琪珊策划&#xff1a;刘燕本文由 Alberto Romero 发表在 towardsdatascience.com&#xff0c;经原作者授权由 InfoQ 中文站翻译并分享OpenAI 于 2020 年 7 月发布了 GPT-3 的 beta API…

com.sun.jersey.api.client.UniformInterfaceException:returned a response status of 403

这是在同一台电脑上,然后启动两台tomcat进行文件传输时候,会出现的一个异常. 403,是因为tomcat默认禁止上传,在tomcat中的config中的web.xml中进行以下的配置就可以进行文件的上传了. <servlet><servlet-name>default</servlet-name> <servlet-cla…

深度学习环境搭建之Anaconda安装keras

一、确定安装版本号 搭环境遇到一堆坑&#xff0c;总结一点最重要的就是要选择好版本。 这里我们要注意tensorflow与keras的版本对应关系。见下图 二、使用pip进行安装 这里注意首先要激活对应的环境 pip install keras版本号后续有时间再补充安装tensorflow-gpu以及pytorch…

顾险峰: 庞加莱猜测的证明和应用

来源&#xff1a;中国科学院数学与系统科学研究院、数学算法俱乐部庞加莱猜测的证明&#xff0c;在几年前引起世人的广泛关注&#xff0c;更掀起中外数学界一场不小的风波。8月8日&#xff0c;丘成桐先生弟子顾险峰教授在知社讲坛做了题为《庞加莱猜测有用吗&#xff1f;》的精…

题解 【国家集训队2011】数颜色

题面 解析 这题也就是一个带修改的莫队啊啊&#xff01;&#xff01; 所以&#xff0c;我们只需要在普通莫队上加上一维时间即可。 怎么加呢&#xff1f; 只需要记录下每次修改和查询的时间&#xff0c; 在左右端点跳跃的同时&#xff0c;也将时间跳到询问的时间就行了。 具体看…

ImportError: cannot import name ‘moving_averages‘

出现这个报错的大部分原因是tensorflow的版本太低&#xff08;我就是&#xff09;&#xff0c;我使用的是tensorflow-gpu&#xff0c;将版本从1.7升级到1.8就解决了这个问题

大脑是怎样和身体交流的?

来源&#xff1a;脑与心智毕生发展研究中心CLIMB你看到五英寸之外向你飞来的球&#xff0c;尽可能迈着最大的步子冲过去抓住它&#xff1b;你用手指抓住了球&#xff0c;突然听到妈妈叫你的名字&#xff0c;你意识到该吃晚饭了&#xff0c;所以你赶紧回家——这些是怎么发生的呢…

java对List的优雅排序

1、准备排序的数据 List<Student> students new ArrayList<>(); students.add(new Student(1,"z1",25)); students.add(new Student(12,"z2",26)); students.add(new Student(9,"z3",27)); students.add(new Student(4,"z4&qu…

关于c语言的数据类型常量的理解

数据类型 int的简单介绍 数据类型在数据结构中的定义是一组性质相同的值的集合以及定义在这个值集合上的一组操作的总称。 变量是用来存储值的所在处&#xff0c;它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。在声明变量时也可指定它…

module ‘tensorflow‘ has no attribute ‘sparse ‘

非常奇怪的一个报错&#xff0c;在查找资料无果的情况下选择了重装keras&#xff08;应该是版本对应出现了问题&#xff09;&#xff0c;报错解决

前端常用开发工具

编辑器 用于编写代码 VS Code Sublime Atom 浏览器 用于测试和调试代码 Chrome谷歌浏览器 Firefox火狐浏览器 图片工具 用于编辑图像 PhotoShop 版本控制 用于管理服务器文件&#xff0c;支持项目中的团队协作&#xff0c;共享代码与资源&#xff0c;以及避免编辑冲突 Git是现如…