位置: 编程技术 - 正文

深入理解JavaScript定时机制(深入理解计算机系统)

编辑:rootadmin

推荐整理分享深入理解JavaScript定时机制(深入理解计算机系统),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:深入理解新发展理念,推进供给侧结构性改革,深入理解新发展理念,深入理解中国式现代化,深入理解新发展理念,推进供给侧结构性改革,深入理解计算机系统,深入理解javascript特性.pdf,深入理解javascript,深入理解javascript,内容如对您有帮助,希望把文章链接给更多的朋友!

本文介绍了JavaScript定时机制,要理解JavaScript的定时机制,就要知道JavaScript的运行机制。

首先声明,JavaScript是单线程运行(JavaScript引擎线程)事件驱动。

一、浏览器中有多个线程

一款浏览器中包含的最基本的线程:

1、JavaScript引擎线程。

2、定时器线程,setInterval和setTimeout会触发这个线程。

3、浏览器事件触发线程,这个线程会触发onclick、onmousemove和其它浏览器事件。

4、界面渲染线程,负责渲染浏览器界面HTML元素。注意:在JavaScript引擎运行脚本期间,界面渲染线程都是处于挂起状态的。也就是说当使用JavaScript对界面中的节点进行操作时,并不会立即体现出来,要等到JavaScript引擎线程空闲时,才会体现出来。(这个最后说)

5、HTTP请求线程(Ajax请求也在其中)。

以上这些线程在浏览器内核的控制下,相互配合,完成工作(具体我也不知道)。

二、任务队列

我们知道JavaScript是单线程的,所有JavaScript代码都在JavaScript引擎线程中运行。阮一峰老师的文章中叫这个线程为主线程,是一个执行栈。(以下内容也主要是根据阮一峰老师的文章理解总结。)

这些JavaScript代码我们可以把他们看成一个个的任务,这些任务有同步任务和异步任务之分。同步任务(比如变量赋值语句,alert语句,函数声明语句等等)直接在主线程上按顺序执行,异步任务(比如浏览器事件触发线程触发的各种各样的事件,使用Ajax返回的服务器响应等)按照时间先后顺序在任务队列(也可以叫做事件队列、消息队列)中排队,等待被执行。只要主线程上的任务执行完了,就会去检查任务队列,看有没有排队等待的任务,有就让排队的任务进入主线程执行。

比如下面的例子:

在这个例子中test()函数执行完大概要8~9秒,所以当我们打开这个页面,在8秒之前点击粉色方块,不会立即弹出提示框,而要等到8秒之后才弹出,而且8秒之前点击几次粉色框,8秒之后就弹出几次。

我们打开这个页面时,主线程先声明函数test,再声明变量pro,然后把p节点赋值给pro,然后给p节点添加click事件,并指定回调函数(挂起),然后调用test函数,执行其中的代码。在test函数中的代码执行期间,我们点击了p节点,浏览器事件触发线程检测到这个事件,就把这个事件放在了任务队列中,以便主线程上的任务(这里是test函数)执行完后,检查任务队列时发现这个事件并执行相应的回调函数。如果我们多次点击,这些多次触发的事件就按触发时间的先后在任务队列中排队(可以再给另外一个元素添加点击事件,交替点击不同的元素来验证)。

下面是总结的任务的运行机制:

异步执行的运行机制如下。(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)

1、所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

2、主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。

3、一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

4、主线程不断重复上面的第三步。

深入理解JavaScript定时机制(深入理解计算机系统)

三、事件和回调函数

我们在给DOM元素指定事件时,都会指定一个回调函数,以便事件真的发生时执行相应的代码。

主线程中事件的回调函数会被挂起,如果任务队列中有正在排队的相应的事件,当主线程检测到时就会执行相应的回调函数。我们也可以说主线程执行异步任务,就是在执行相应的回调函数。

四、事件循环

主线程检查任务队列中事件的过程是循环不断的,因此我们可以画一个事件循环的图:

上图中主线程产生堆和执行栈,栈中的任务执行完毕后,主线程检查任务队列中由其他线程传入的发生过的事件,检测到排在最前面的事件,就从挂起的回调函数中找出与该事件对应的回调函数,然后在执行栈中执行,这个过程一直重复。

五、定时器

结合以上知识,下面探讨JavaScript中的定时器:setTimeout()和setInterval()。

setTimeout(func, t)是超时调用,间隔一段时间后调用函数。这个过程在事件循环中的过程如下(我的理解):

主线程执行完setTimeout(func, t);语句后,把回调函数func挂起,同时定时器线程开始计时,当计时等于t时,相当于发生了一个事件,这个事件传入任务队列(结束计时,只计时一次),当主线程中的任务执行完后,主线程检查任务队列发现了这个事件,就执行挂起的回调函数func。我们指定的时间间隔t只是参考值,真正的时间间隔取决于执行完setTimeout(func, t);语句后的代码所花费的时间,而且是只大不小。(即使我们把t设为0,也要经历这个过程)。

setInterval(func, t)是间歇调用,每隔一段时间后调用函数。这个过程在事件循环中的过程与上面的类似,但又有所不同。

setTimeout()是经过时间t后定时器线程在任务队列中添加一个事件(注意是一个),而setInterval()是每经过时间t(一直在计时,除非清除间歇调用)后定时器线程在任务队列中添加一个事件,而不管之前添加的事件有没有被主线程检测到并执行。(实际上浏览器是比较智能的,浏览器在处理setInterval的时候,如果发现已任务队列中已经有排队的同一ID的setInterval的间歇调用事件,就直接把新来的事件 Kill 掉。也就是说任务队列中一次只能存在一个来自同一ID的间歇调用的事件。)

举个例子,假如执行完setInterval(func, t);后的代码要花费2t的时间,当2t时间过后,主线程从任务队列中检测到定时器线程传入的第一个间歇调用事件,func开始执行。当第一次的func执行完毕后,第二次的间歇调用事件早已传入任务队列,主线程马上检测到第二次的间歇调用事件,func函数又立即执行。这种情况下func函数的两次执行是连续发生的,中间没有时间间隔。

下面是个例子:

结果:

为什么8.6秒过后没有输出两个一样的时刻,原因在上面的内容中可以找到。

执行例子中的for循环花费了ms,在执行for循环的过程中队列中只有一个间歇调用事件在排队(原因如上所述),当ms过后,第一个间歇调用事件进入主线程,对于这个例子来说此时任务队列空了,可以再次传入间歇调用事件了,所以ms这个时刻第二次间歇调用事件(实际上应该是第三次)传入任务队列,由于主线程的执行栈已经空了,所以主线程立即把对应的回调函数拿来执行,第二次调用与第一次调用之间仅仅间隔了ms(其实+=,差不多就等于9秒了)。我们看到第三次调用已经恢复正常了,因为此时主线程中已经没有其他代码了,只有一个任务,就是隔一段时间执行一次间歇调用的回调函数。

用setTimeout()实现间歇调用的例子:

结果:

每两次调用的时间间隔基本上是相同。想想为什么?

再看一个例子:

这个例子的结果是提示框先弹出,然后黑色边框的p元素才出现在页面中。原因很简单,就一句话:

在JavaScript引擎运行脚本期间,界面渲染线程都是处于挂起状态的。也就是说当使用JavaScript对界面中的节点进行操作时,并不会立即体现出来,要等到JavaScript引擎线程空闲时,才会体现出来。

标签: 深入理解计算机系统

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

上一篇:javascript 中的事件委托详解

下一篇:深入理解JavaScript中的块级作用域、私有变量与模块模式(深入理解新发展理念,推进供给侧结构性改革)

  • 借款利息收入是企业收入吗
  • 企业所得税弥补亏损明细表怎么看
  • 购入国内旅客运输服务
  • 固定资产接受捐赠的计入什么科目
  • 房地产企业消防设施计入什么科目
  • 小微企业免征的增值税要交所得税吗
  • 给客户提供的价值
  • 股权转让如何避免土地增值税
  • 企业营改增后的会计处理有何变化
  • 公司过账什么意思
  • 应收账款客户少了几毛没有付怎么处理
  • 一般纳税人和小微企业的区别
  • 增值税进项税抵扣规定
  • 营改增的优惠政策
  • 商业健康保险个人所得税扣除
  • 计提坏账损失纳税的调整
  • 建筑企业预交增值税问题尚未得到解决
  • 子公司评估增值 出售股权
  • 企业净资产增长率上升说明什么
  • 股权收购特殊性税务处理案例
  • win11安装失败无法开机
  • 鸿蒙系统怎么设置桌面小组件
  • 其他业务收入跨年调整
  • 外贸行业税率
  • 保险补偿金额的计算
  • wordpress静态分离
  • js添加方法
  • HTTP加密/HTTPS工作过程
  • php的难点
  • 固定资产实收资本按照什么入账
  • 企业提取盈余公积属于什么会计科目
  • 新设立的企业如何办理开业税务登记
  • mongodb 教程
  • 不良贷款转让怎么操作
  • 溢价收购公司会计处理
  • 给个体工商户打工受伤怎么办
  • 增值税留抵税款制度
  • 中级会计需要初级会计证吗
  • 应交税费属于什么科目借方
  • 服务行业收入会增加吗
  • 退休人员在企业工作工资怎么算
  • 处置存货损失应该放哪个科目
  • 利润相关计算公式是什么
  • 待摊费用和预付费用的区别
  • 关税的计税方式一般可以分为
  • 暂估费用票的账务处理
  • 探望公司员工现金费用报销怎么写
  • 购买的商品属于什么会计科目
  • 发票没交税可以报销吗
  • 结转已销商品的销售成本分录
  • 进口医疗器械产品
  • sql语句递归
  • MySQL使用select语句查询指定表中指定列(字段)的数据
  • win10临时文件设置
  • 怎么卸载电脑上的迅雷软件
  • linux awk '{print $0}'
  • 快速查看浏览的英语短语
  • windows8连接wifi
  • win8系统怎么关机
  • linux 有哪些
  • win7如何取消开机启动
  • (1)cocos2d-x-2.2.4搭建windows开发环境
  • socket pf_inet
  • android集成chromiumview
  • wc -l命令
  • 安卓演示模式有什么用
  • [小权~编码路&Android] BroadcastReceiver应用详解
  • cmd命令怎么重启
  • js并且判断
  • Chrome调试技巧
  • 日拱一卒下一句是什么
  • 信息页文内画中画广告js实现代码(文中加载广告方式)
  • jquery插件库怎么导入
  • 江西国税发票查询官网
  • 四川省地方税务局2017年1号公告
  • 车船税完税凭证去哪里打印
  • 给税务局说明怎写
  • 一般纳税人认定书
  • 贵州地税电话
  • 华数tv业务认证账号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设