JavaScript之事件循环案例讲解

当用户在网页上操作时,我们需要通过JavaScript代码来响应用户的事件,例如点击、滚动、输入等等。但是由于JavaScript是单线程执行的,如果在响应事件的同时还要执行许多其他的代码,就会导致页面出现卡顿、响应迟缓的问题。为了解决这个问题,JavaScript引入了事件循环机制。

什么是事件循环

事件循环是JavaScript引擎实现多任务的基础,在执行JavaScript代码时,主线程会不断地从任务队列中取出任务并执行。如果任务队列中没有任务,主线程就会等待任务出现。

任务队列分为两种类型:宏任务(macro-task)和微任务(micro-task)。宏任务包括DOM事件、定时器任务、网络请求等,而微任务主要有Promise、MutationObserver等。

当主线程执行完一个宏任务后,会立即去检查是否有微任务需要执行,如果有,则依次取出并执行这些微任务,直到所有微任务都被执行完毕,才会再次取出下一个宏任务执行。

事件循环的示例

示例一

假设我们有如下代码:

console.log('Task1');

setTimeout(() => {
  console.log('Task2');
}, 0);

Promise.resolve().then(() => {
  console.log('Task3');
});

console.log('Task4');

按照事件循环的执行顺序,程序会先执行主线程中的当前任务(即Task1),然后检查微任务队列,发现有一个Promise的回调函数(即Task3),于是执行Promise的回调函数。接着,再次检查有没有微任务,此时微任务队列为空。

由于我们设置了一个0ms的定时器(即Task2),因此Task2会被加入宏任务队列,此时主线程中没有其他任务,于是会去执行Task2。执行完Task2后,又会检查微任务队列,发现队列中为空,于是继续检查宏任务队列。

最后,剩下的一条任务是Task4,于是会被主线程执行。整个程序的输出结果如下:

Task1
Task4
Task3
Task2

可以看到,虽然定时器设置的是0ms,但是定时器回调函数Task2并没有立即执行,而是在所有微任务都被执行完毕后才被执行。

示例二

再看一个复杂一点的例子:

console.log('Task1');

setTimeout(() => {
  console.log('Task2');
}, 0);

Promise.resolve().then(() => {
  console.log('Task3');
  Promise.resolve().then(() => {
    console.log('Task4');
  });
}).then(() => {
  console.log('Task5');
});

console.log('Task6');

这个例子中,我们多了一层Promise,并在Promise的回调函数中嵌套了一个Promise的回调函数。

主线程首先执行Task1,然后将两个Promise的回调函数(Task3和Task4)放入微任务队列中。接着检查宏任务队列,发现有一个定时器,将Task2放入宏任务队列中。

执行完毕后,按照事件循环的顺序依次执行微任务队列中的Task3和Task4。注意,Task4是Task3的嵌套回调函数,因此在Task3执行完毕后才能执行Task4。

执行完毕微任务队列后,检查微任务队列,发现还有一个Task5,于是立刻执行该任务。

最后,主线程执行Task6。整个程序的输出结果如下:

Task1
Task6
Task3
Task4
Task5
Task2

总结

通过这两个例子,我们可以看到JavaScript引擎通过任务队列和事件循环机制实现了多任务的执行。在编写JavaScript代码的时候,我们需要注意事件循环的规则,合理地使用微任务和宏任务,避免出现卡顿、响应迟缓的情况。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript之事件循环案例讲解 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • js对url进行编码解码的三种方式总结

    下面是关于“js对url进行编码解码的三种方式总结”的详细解释。 1. URL编码 URL编码是将 URL 中非 ASCII 字符的字符转换成 “%” 加上两位十六进制值,即 URL 编码。 在JavaScript中,可以使用 encodeURIComponent() 方法实现 URL 编码。该方法可以将 URL 中所有需要转换的字符都进行转换。 下面是一个…

    JavaScript 2023年5月20日
    00
  • JavaScript前端优化策略深入详解

    JavaScript前端优化策略深入详解 在前端开发中,JavaScript无疑是最为重要的语言之一,但是随着项目逐渐变大,JavaScript的性能瓶颈也逐渐显现出来。因此,今天我们要介绍一些JavaScript前端优化的策略,以提高项目的性能。 1. 减少HTTP请求次数 在前端开发中,HTTP请求往往是导致页面性能下降的主要原因之一。因此,在设计网站架…

    JavaScript 2023年5月19日
    00
  • p5.js实现故宫橘猫赏秋图动画

    下面是关于“p5.js实现故宫橘猫赏秋图动画”的完整攻略。 1. 确定实现思路 首先,需要了解故宫橘猫赏秋图的具体内容。然后,根据实际需求,确定实现思路。本次任务的实现思路如下: 绘制故宫橘猫赏秋图的背景; 根据时间变化,实现橘猫的移动效果; 实现橘猫的眨眼、转头等动作; 实现飘落的落叶特效。 2. 编写代码 2.1 绘制背景 使用p5.js提供的prelo…

    JavaScript 2023年6月11日
    00
  • javascript数组里的27个方法总合详解

    首先,我们需要了解JavaScript数组的数据结构和一些常用的API。以下是这篇攻略的大纲: JavaScript数组:数据结构和常用API 1. 数组基础 数组是一种有序的数据集合。它可以存储任何类型的数据,包括数字、字符串、函数、对象等等。一个数组可以包含任意数量的元素,每个元素可以通过一个索引值(从0开始)来访问。 数组的常用操作包括:创建数组、添加…

    JavaScript 2023年5月27日
    00
  • 使用开源Cesium+Vue实现倾斜摄影三维展示功能

    下面是使用开源Cesium+Vue实现倾斜摄影三维展示功能的完整攻略。 1. 开源Cesium+Vue简介 1.1 Cesium Cesium 是一个可视化地球数据的 JavaScript 库,拥挤者来自美国宾夕法尼亚州的开源项目。 Cesium支持多样化地球数据的可视化,包括卫星、建筑、城市、气象等等,特别是对于三维地球数据的处理。 1.2 Vue Vue…

    JavaScript 2023年6月11日
    00
  • 微信小程序单选框自定义赋值

    微信小程序中的单选框组件通常会使用预设选项进行赋值。但有时候,我们需要自定义单选框的选项内容和值。下面是一些实现自定义单选框赋值的方法: 方式一:使用wx:for循环渲染视图和数据 我们可以使用wx:for指令和数组来实现自定义单选框赋值。首先,定义一个数组用于存储单选框的选项,数组中每一项表示单选框的一个选项,包含一个name属性表示选项文本,一个valu…

    JavaScript 2023年6月11日
    00
  • js是什么文件格式?.js文件怎么打开?

    JS是JavaScript的缩写,是一种脚本语言,广泛用于Web页面的设计,行为与HTML相互作用,并且可以被各种不同的网页浏览器支持。 对于.js文件,它是JavaScript代码文件的文件扩展名,在开发过程中非常常见。通常,我们需要打开.js文件来编辑、查看或修改其中的代码内容。下面是打开.js文件的几种方法: 方法一:使用文本编辑器 我们可以通过文本编…

    JavaScript 2023年5月27日
    00
  • 9个让JavaScript调试更简单的Console命令

    9个让JavaScript调试更简单的Console命令 在日常的JavaScript开发过程中,我们经常需要进行调试。而控制台(Console)是我们不可或缺的调试工具之一。在Chrome浏览器中,Console提供了许多有用的命令,下面将介绍9个让JavaScript调试更简单的Console命令。 log() 用来在控制台输出信息,是开发中最常用的调试…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部