JavaScript运行机制之Event Loop

这次给大家带来javascript运行机制之event loop,使用javascript运行机制的注意事项有哪些,下面就是实战案例,一起来看一下。

主线程从”任务队列”中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

为了更好地理解Event Loop,请看下图

bg2014100802.png

上图中,主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在”任务队列”中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去读取”任务队列”,依次执行那些事件所对应的回调函数。

立即学习“Java免费学习笔记(深入)”;

执行栈中的代码(同步任务),总是在读取”任务队列”(异步任务)之前执行。请看下面这个例子。

    var req = new XMLHttpRequest();    req.open('GET', url);        req.onload = function (){};        req.onerror = function (){};        req.send();

登录后复制

上面代码中的req.send方法是Ajax操作向服务器发送数据,它是一个异步任务,意味着只有当前脚本的所有代码执行完,系统才会去读取”任务队列”。所以,它与下面的写法等价。

    var req = new XMLHttpRequest();    req.open('GET', url);    req.send();    req.onload = function (){};        req.onerror = function (){};

登录后复制

也就是说,指定回调函数的部分(onload和onerror),在send()方法的前面或后面无关紧要,因为它们属于执行栈的一部分,系统总是执行完它们,才会去读取”任务队列”。

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

JavaScript运行机制之任务队列

浏览器的多线程机制详解

关于js中类型转换的一些小问题

以上就是JavaScript运行机制之Event Loop的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2781860.html

(0)
上一篇 2025年3月8日 16:23:43
下一篇 2025年3月8日 16:23:54

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript的定时器详解

    这次给大家带来javascript的定时器详解,使用javascript的定时器注意事项有哪些,下面就是实战案例,一起来看一下。 除了放置异步任务的事件,”任务队列”还可以放置定时事件,即指定某些代码在多少时间之后执…

    编程技术 2025年3月8日
    200
  • Node.js的Event Loop详解

    这次给大家带来node.js的event loop详解,使用node.js的event loop注意事项有哪些,下面就是实战案例,一起来看一下。 Node.js也是单线程的Event Loop,但是它的运行机制不同于浏览器环境。 请看下面的…

    2025年3月8日
    200
  • JS的Arrary方法

    这次给大家带来js的arrary方法,使用js的arrary方法注意事项有哪些,下面就是实战案例,一起来看一下。 栈方法: js提供了两个方法,来实现类似栈的操作: push()、pop() 栈是一种LIFO(last in first o…

    编程技术 2025年3月8日
    200
  • 判断日期是否有效的JavaScript代码段

    这次给大家带来判断日期是否有效的javascript代码段,用javascript判断日期是否有效的注意事项有哪些,下面就是实战案例,一起来看一下。 JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaS…

    编程技术 2025年3月8日
    200
  • JS匀速运动实例详解

    本文主要和大家分享JS匀速运动实例详解,希望能帮助到大家,我们先和大家介绍JS运动的基本原理。 JS运动的基本原理: 让p运动起来,关键是修改物体的坐标, op.style.left=offsetLeft+speed+’px’; 登录后复制…

    2025年3月8日
    200
  • 使文本高亮的JavaScript代码

    这次给大家带来使文本高亮的javascript代码,用javascript使文本高亮的的注意事项有哪些,下面就是实战案例,一起来看一下。 有很多JQuery的第三方库可以实现高亮文本的功能,但我更喜欢用下面这一小段JavaScript代码来…

    编程技术 2025年3月8日
    200
  • 使文字动效的JavaScript代码

    这次给大家带来使文字动效的javascript代码,用javascript代码使文字动效的注意事项有哪些,下面就是实战案例,一起来看一下。 有时你会希望给你的一段文字增加动效,让其中的每个字都动起来。你可以使用下面这段jQuery插件代码来…

    编程技术 2025年3月8日
    200
  • 逐个隐藏元素的JavaScript代码

    这次给大家带来逐个隐藏元素的javascript代码,使用javascript代码逐个隐藏元素的注意事项有哪些,下面就是实战案例,一起来看一下。 下面这个jQuery插件可以根据你设置的步长(间隔时间)来逐个隐藏一组元素。在列表元素的重新加…

    编程技术 2025年3月8日
    200
  • angularjs如何导出Excel实例分享

    本文主要和大家分享angularjs如何导出Excel实例,希望能帮助到大家。 angularjs 1.x导出excel方法,常用的有2种 1. 直接导出table为xls service中加入 homeServiceMoudule.fac…

    2025年3月8日
    200
  • js归并算法实例详解

    本文主要和大家分享js归并算法实例详解,希望能帮助到大家。 将数组递归分裂成单个元素  然后合并数组 let data3 = [14, 54, 73, 38, 39, 67, 75, 80, 50, 40, 96, 27, 105, 109…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论