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;上海大学法学院硕士研究生…

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

法国数学到底有多厉害?

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

DevExpress破解和消除弹出框问题

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

放心,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;》的精…

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

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

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

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

非打印字符

ASCLL码值的使用使c语言中用&#xff0c;使得仅使用整数就可用在计算机上各种字符&#xff08;包括各国的语言文字&#xff0c;符号&#xff09;&#xff0c;可是一些代表行为的ASCLL字符却无法打印出来&#xff08;如&#xff1a;退格、换行、终端响铃之类的&#xff09;。这里…

在运行Loaded runtime CuDNN library: 7103 (compatibility version 7100) but source was compiled with 7003

最后错误代码为134&#xff08;6 signal&#xff09;&#xff08;大概是这样&#xff0c;错误解决了记录一下&#xff0c;错误忘了截图&#xff09; 环境是cuda8.0&#xff0c;cudnn7.05&#xff0c;&#xff08;在Titan上&#xff0c;cuda8.0、tensorflow1.4正好对应cudnn6.0&…

《自然语言处理中的因果推理》综述论文,以色列理工谷歌等13位NLP大牛阐述因果推理NLP的估计、预测、解释和超越...

来源&#xff1a;专知摘要科学研究的一个基本目标是了解因果关系。然而&#xff0c;尽管因果关系在生命和社会科学中发挥着关键作用&#xff0c;但在自然语言处理(NLP)中却没有同等的重要性&#xff0c;后者传统上更重视预测任务。随着因果推理和语言处理融合的跨学科研究的兴起…

清华大学刘云浩教授——人工智能打开了潘多拉的盒子吗?

来源&#xff1a;计算思维和人工智能2020年8月的第一周&#xff0c;清华大学暑期学校在荷塘雨课堂上“云开学”。开学典礼上&#xff0c;清华大学软件学院刘云浩教授作了一场主题为《What is the role of AI Tomorrow?——人工智能打开了潘多拉的盒子吗&#xff1f;》的讲座。…

【重点!!!】【堆】215.数组中的第K个最大元素

题目 法1&#xff1a;小根堆 最大的K个元素 > 小根堆&#xff08;类似上窄下宽的梯形&#xff09; 最小的K个元素 > 大根堆&#xff08;类似倒三角形&#xff09; 必须掌握&#xff01;&#xff01;&#xff01; class Solution {public int findKthLargest(int[] nu…

Spring 系列之(1)Spring-framework 调试环境搭建

调试环境&#xff1a; JDK1.8 Gradle IDEA Git 一、开始代码 clone 将 spring-framework 项目 fork 到自己的代码仓&#xff0c;方便自己加注释。下载好 Gradle &#xff0c;用 idea 打开项目&#xff0c;进行初步构建。 参考文档&#xff1a;官方文档 二、预编译 spring-oxm&a…

计算机网络知识归纳

计算机网络 第一章 概述 1.1 计算机网络在信息时代中的作用 互联网的两个重要基本特点&#xff1a;1.连通性、2.共享 “资源”指的是网络中所有的网络软件、硬件、数据和通信等等资源 硬件资源、软件资源、数据资源、信道资源&#xff08;信号传输的媒介&#xff09; “共享…

Linux基础入门(一)

Linux为何物 Linux就是一个操作系统&#xff0c;就像你已经已经知道的window、macOS系统一样&#xff0c;至于操作系统是什么&#xff0c;就不用过多解释了 Linux&#xff0c;全称GNU/Linux&#xff0c;是一种免费使用和自由传播的类UNIX操作系统&#xff0c;其内核由林纳斯本…