位置: 编程技术 - 正文

理解JS事件循环(js事件循环过程)

编辑:rootadmin

推荐整理分享理解JS事件循环(js事件循环过程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js事件循环机制的运用,nodejs事件循环和js事件循环,js事件循环执行顺序,js事件循环面试题,js事件循环执行顺序,js事件循环和任务队列,js事件循环面试题,js中事件循环的理解,内容如对您有帮助,希望把文章链接给更多的朋友!

伴随着JavaScript这种web浏览器脚本语言的普及,对它的事件驱动交互模型,以及它与Ruby、Python和Java中常见的请求-响应模型的区别有一个基本了解,对您是有益的。在这篇文章中,我将解释一些JavaScript并发模型的核心概念,包括其事件循环和消息队列,希望能够提升你对一种语言的理解,这种语言你可能已经在使用但也许并不完全理解。

这篇文章是写给谁的&#;

这篇文章是针对在客户端或服务器端使用或计划使用JavaScript的web开发人员的。如果你已经精通事件循环,那么这篇文章的大部分对你来说会很熟悉。对于那些还不是很精通的人,我希望能给你提供一个基本的了解,这样可以更好地帮助你阅读和编写日常代码。

非阻塞I / O

在JavaScript中,几乎所有的I/O都是非阻塞的。这包括HTTP请求,数据库操作和磁盘读写,单线程执行要求在运行期执行一个操作时,提供一个回调函数,然后继续做其它的事情。当操作已经完成时,消息和已提供的回调函数一起插入到队列。在将来的某个时候,消息从队列移除,回调函数触发。

虽然这种交互模型可能对已经习惯使用用户界面的开发人员很熟悉,比如“mousedown,”和“click”事件在某一时刻被触发。这与通常在服务器端应用程序进行的同步式请求-响应模型是不同的。

让我们来比较一下两小块代码,发出HTTP请求到www.google.com和输出响应到控制台。首先看看Ruby,配合使用Faraday(一个Ruby 的HTTP 客户端开发库):

执行路径很容易跟踪:

1、执行get方法,执行的线程等待,直到收到响应2、从谷歌收到响应并返回给调用者,它存储在一个变量中3、变量的值(在本例中,就是我们的响应)输出到控制台4、值“Done!“输出到控制台让我们使用Node.js和Request库在JavaScript做同样的事情:

表面上看略有不同,实际行为截然不同:

1、执行请求函数,传递一个匿名函数作为回调,当响应在将来某个时候可用时执行回调。2、“Done!“立即输出到控制台3、在将来的某个时候,响应返回和回调执行时,输出它的内容到控制台事件循环

将调用者和响应解耦,使得JavaScript在运行期等待异步操作完成和回调触发时可以做其他事情。但是这些回调在内存中是如何组织的,按什么顺序执行?什么导致他们被调用?

JavaScript运行时包含一个消息队列,它存储了需要处理的消息的列表和相关的回调函数。这些消息是以队列的形式来响应回调函数所涉及的外部事件(如鼠标单击或收到HTTP请求的响应)的。例如,如果用户单击一个按钮,但没有提供回调函数,那么也没有消息会被加入队列。

在一次循环,队列提取下一条消息(每次提取称为一次“tick”),当事件发生,该消息的回调执行。

理解JS事件循环(js事件循环过程)

回调函数的调用在调用栈作为初始化frame(片段),由于JavaScript是单线程的,未来的消息提取和处理因为等待栈的所有调用返回而被停止。后续(同步)函数调用会添加新的调用frame到栈(例如,函数init调用函数changeColor)。

在这个例子中,当用户单击“foo”元素时,一条消息(及其回调函数changeColor)会被插入到队列,并触发“onclick“事件。当消息离开队列时,其回调函数changeColor被调用。当changeColor返回(或者是抛出一个错误),事件循环仍在继续。只要函数changeColor存在,并指定为“foo”元素的onclick方法的回调,那么在该元素上单击会导致更多的消息(和相关的回调changeColor)插入队列。

队列附加消息

如果一个函数在代码中按异步调用(比如setTimeout),提供的回调将最终作为一个不同的消息队列的一部分被执行,它将发生在事件循环的某个未来的动作上。例如:

由于setTimeout的非阻塞特性,它的回调将在至少0毫秒后触发,而不是作为消息的一部分被处理。在这个示例中,setTimeout被调用, 传入了一个回调函数g且延时0毫秒后执行。当我们指定时间到达(当前情况是,几乎立即执行),一个单独的消息将被加入队列(g作为回调函数)。控制台打印的结果会是像这样:“foo”,“baz”,“blix”,然后是事件循环的下一个动作:“bar”。如果在同一个调用片段中,两个调用都设置为setTimeout -传递给第二个参数的值也相同-则它们的回调将按照调用顺序插入队列。

Web Workers

使用Web Workers允许您能够将一项费时的操作在一个单独的线程中执行,从而可以释放主线程去做别的事情。worker(工作线程)包括一个独立的消息队列,事件循 环,内存空间独立于实例化它的原始线程。worker和主线程之间的通信通过消息传递,看起来很像我们往常常见的传统事件代码示例。

首先,我们的worker:

然后,主要的代码块在我们的HTML中以script-标签存在:

在这个例子中,主线程创建一个worker,同时注册logResult回调函数到其“消息”事件。在worker里,reportResult函数注册到自己的“消息”事件中。当worker线程接收到主线程的消息,worker入队一条消息同时带上reportResult回调函数。消息出队时,一条新消息发送回主线程,新消息入队主线程队列(带上logResult回调函数)。这样,开发人员可以将cpu密集型操作委托给一个单独的线程,使主线程解放出来继续处理消息和事件。

关于闭包的

JavaScript对闭包的支持,允许你这样注册回调函数,当回调函数执行时,保持了对他们被创建的环境的访问(即使回调的执行时创建了一个全新的调用栈)。理解我们的回调作为一个不同的消息的一部分被执行,而不是创建它的那个会很有意思。看看下面的例子:

在这个例子中,changeHeaderDeferred函数被执行时包含了变量header。函数 setTimeout被调用,导致消息(带上changeHeader回调)被添加到消息队列,在大约毫秒后执行。然后 changeHeaderDeferred函数返回false,结束第一个消息的处理,但header变量仍然可以通过闭包被引用,而不是被垃圾回收。当 第二个消息被处理(changeHeader函数),它保持了对在外部函数作用域中声明的header变量的访问。一旦第二个消息 (changeHeader函数)执行结束,header变量可以被垃圾回收。

提醒

JavaScript 事件驱动的交互模型不同于许多程序员习惯的请求-响应模型,但如你所见,它并不复杂。使用简单的消息队列和事件循环,JavaScript使得开发人员在构建他们的系统时使用大量asynchronously-fired(异步-触发)回调函数,让运行时环境能在等待外部事件触发的同时处理并发操作。然而,这不过是并发的一种方法。

标签: js事件循环过程

本文链接地址:https://www.jiuchutong.com/biancheng/384741.html 转载请保留说明!

上一篇:JavaScript中定义类的方式详解(JavaScript中定义数组)

下一篇:JavaScript中的原始值和复杂值(js原型作用)

  • 增值税发票税控开票软件
  • 建筑公司跨区域迁入
  • 固定资产二级科目取消原因
  • 签合同前的费用由谁承担
  • 没有销售是什么意思
  • 事务所和公司的专利工程师
  • 免税进口的自用设备再销售时该怎么征税
  • 个体工商户不经营会自动注销吗
  • 网站服务器使用什么IP地址
  • 不动产经营租赁印花税税率
  • 公司筹建期间发生的费用没有发票
  • 增值税专用发票怎么开
  • 2021年个体工商户的税率是多少
  • 税务申报没报上怎么办
  • 固定资产和在建工程占所有者权益的占比
  • 土地转让怎么缴纳增值税
  • 个人承包劳务合法吗?
  • 暂估入库库存出现负数怎么办?
  • 农产品增值税核定扣除办法
  • 机器用润滑油怎么使用
  • 房地产企业收取的诚意金
  • 苹果系统更新在哪里找
  • Win10怎么清除系统
  • php生成验证码的方法
  • 商场充值卡发票在哪开
  • 固定资产全额折旧
  • 老电脑更新系统会怎么样
  • vue中使用echars
  • 电汇款项会计分录
  • 业务招待费有
  • 企业付给个人工资怎么做
  • 股东股权转让税务稽查案例
  • 百度统计网址
  • vue侧边栏导航,右侧显示对应内容
  • display version命令
  • 域名续费多久生效
  • 命令行修改mbr
  • wordpress建立数据库错误
  • 非财政补助结余分配和非财政拨款结余分配
  • 发票抵扣联和发票联区别
  • 金蝶怎么设置销售出库单模板
  • mongodb局域网访问
  • 哪些行业不用交税
  • 零申报未申报可以不处罚吗
  • 公司买的茶叶怎么入账
  • 印花税计税依据和税率
  • 企业如何在没有税务登记
  • 车间拆除施工方案
  • 为什么出口退税率低于适用税率
  • 出口视同内销账务处理?
  • 结转利润分配的二级明细账户
  • 营业外收入如何纳税
  • 纳税人去税务局办什么
  • 给公司股东分红的账务处理
  • 工伤保险待遇是否属于劳动争议
  • 企业付的快递费怎么做账
  • 银行对账单和回单有什么区别
  • 现金支出业务的流程步骤包括
  • c3p0连接池提供了哪些方式来配置连接池的参数
  • win8 vmware
  • linux查看sh
  • linux阅读器
  • jquery从入门到精通
  • 用pyth
  • 基于arcgis的python编程
  • iframe隐藏页面内容
  • js简单实现鼠标移动后面文字也移动
  • 将光标定位于输入端
  • 获取服务器信息失败mc
  • u3d transform
  • 2个月培训
  • html应用css
  • javascript 日期运算
  • 山东税务申报如何网上申报
  • 个人所得税全员申报什么时候开始的
  • 增值税发票选择确认平台查询不到以开出的进项发票?
  • 重庆市电子税务局电话
  • 我们如何理解税收意义
  • 税务异常处理
  • 赞美税务局的话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设