理解事件循环

Javascript是一门单线程语言,这意味着在同一时间内只能执行一个任务。为了使JavaScript实现并发操作和异步处理,引入了事件循环(Event Loop)的概念。

事件循环的定义

事件循环可以被认为是 JavaScript 执行运行时的方法。它允许 JavaScript 进程在执行代码、处理事件和等待异步操作完成时保持响应能力。

所有的异步事件(例如点击、计时器、请求等)都会被添加到事件队列中。当主线程空闲时,它会从事件队列中取出第一个事件并将其执行。这个过程不断重复,直到事件队列为空。

图示如下:

事件循环的执行顺序

事件循环的执行顺序分为两层:

第一层是macrotask,也就是宏任务队列。比如setTimeout/setInterval、setImmediate、I/O操作等,每次选择macrotask中最先进入队列的任务执行。

第二层是microtask,也就是微任务队列。比如Promise.then()、process.nextTick()等,每次选择microtask队列中的所有任务依次执行,直到清空微任务队列为止。

图示如下:

示例代码

---------------------

------------- -- -
  ------------------ - ----
-- ---

------------------------- -- -
  -------------------- - ----
---

-------------------

输出结果为:

-----
---
------- - -
----- - -

解释:首先执行console.log('start')和console.log('end'),然后将setTimeout()和Promise.resolve()添加到宏任务队列和微任务队列中。由于Promise.then()的优先级高于setTimeout(),所以先执行Promise.then(),输出'promise - 2',再执行setTimeout(),输出'timer - 1'。

学习和指导意义

理解事件循环是成为一名JavaScript开发人员的重要基础。合理利用事件循环可以避免阻塞主线程,提高应用程序的响应能力和性能。在编写异步代码时,建议使用Promise等微任务进行处理,而不是使用setTimeout等宏任务。同时,在使用异步代码时应该注意错误处理和资源释放问题,以便保持应用程序的稳定性和可维护性。

参考资料:https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/11272


猜你喜欢

  • JavaScript中的异步循环

    在JavaScript编程中,异步操作是非常常见的,例如用于处理网络请求或执行耗时任务。然而,在异步场景下进行循环操作可能会遇到一些挑战。本文将深入探讨JavaScript中的异步循环,并提供实用的指...

    7 年前
  • 如何禁用 div 元素和内部的所有内容

    在前端开发中,有时候我们需要禁用某个元素及其内部的所有内容,这在实际应用中非常有用。本文将介绍如何使用 CSS 和 JavaScript 实现这个功能。 使用 CSS 禁用 div 元素和内部的所有内...

    7 年前
  • JavaScript日期格式yyyy-mm-dd

    概述 日期是前端开发中经常用到的一个概念,而 JavaScript 作为一门强大的脚本语言,也提供了丰富的 API 来操作日期。在实际开发中,我们经常需要对日期进行格式化以便更好地展示给用户。

    7 年前
  • 如何把异步函数调用到 Node.js 或 JavaScript 同步功能?

    JavaScript 是一门单线程语言,而在 Node.js 中,我们经常需要进行异步操作来避免阻塞主线程。然而,在某些情况下,我们可能需要将异步函数转换为同步函数,以便更好地控制流程。

    7 年前
  • 复制到剪贴板没有闪光灯!——浏览器 API 剪贴板操作

    在前端开发中,经常需要将数据复制到剪贴板中,以便用户可以方便地粘贴到其他应用程序中。然而,某些情况下,我们可能无法正确地复制内容并将其显示在剪贴板中,并且在某些浏览器中,未被授权的访问剪贴板会导致安全...

    7 年前
  • 为什么JavaScript `atob()`和`btoa()`命名吗?

    在前端开发中,经常需要进行数据的加密和解密。其中,JavaScript提供了两个函数:atob()和btoa()。这两个函数用于在JavaScript字符串和Base64编码之间进行转换。

    7 年前
  • 网站如何知道他们不是默认主页或搜索提供商?

    在互联网时代,许多用户访问网站的起点都是浏览器的默认主页或搜索引擎。然而,有些网站并不希望被认为是默认提供商,因为这可能会影响它们的品牌形象和流量来源。那么,网站如何知道自己是否被设置为浏览器的默认主...

    7 年前
  • 验证谷歌地图中的点是陆地还是水

    在谷歌地图中,我们通常会遇到需要验证一个点(如经纬度坐标)是位于陆地或水域的情况。这个问题在开发Web应用程序时非常常见,例如,当我们需要根据用户提供的位置信息来显示天气信息时,需要检查该位置是否位于...

    7 年前
  • 有一个很好的测试替代select2或选择?

    在前端开发中,处理下拉列表是十分常见的需求。而 select2 是一个广泛应用的 jQuery 插件,可以让下拉框变得更加交互友好,并且支持搜索等功能。但是,在编写自动化测试时,使用 select2 ...

    7 年前
  • JS的正则表达式:如何使用捕获组来进行替换?

    在JavaScript中,正则表达式是一种强大的工具,可以用于匹配和替换文本。当我们需要将匹配到的文本替换为新的文本时,我们可以使用捕获组来方便地引用匹配到的子字符串。

    7 年前
  • 如何在“允许文件访问”模式下使用Chrome启动HTML?

    当我们打开本地 HTML 文件时,Chrome 浏览器可能会因为安全策略的原因而阻止页面正常加载。这是因为默认情况下,Chrome 不允许本地文件直接访问其他本地文件或资源,即使它们在同一目录下。

    7 年前
  • 我怎么可以在JavaScript中替换字符串正则表达式匹配吗?

    在前端开发中,我们通常需要对文本进行处理和修改。其中,替换字符串是一项非常基础且常见的操作。在JavaScript中,我们可以使用正则表达式来匹配需要替换的字符串并进行操作。

    7 年前
  • 为什么我不能把promise.catch()程序吗?

    在前端开发中,我们常常需要处理异步操作。Promise是一种处理异步操作的方式,它可以让我们更加优雅地处理异步代码。 然而,Promise也有一些需要注意的细节,其中之一就是我们不能忽略或省略prom...

    7 年前
  • ngOnInit 不被注入类被实例化时

    在 Angular 中,ngOnInit 是一个常用的生命周期钩子函数,通常用于在组件初始化时执行一些操作。然而,在某些情况下,可能会出现类未被注入但需要在该生命周期中使用的情况,这时我们需要做一些额...

    7 年前
  • 如何从图像中获得像素的x、y坐标颜色?

    在前端开发过程中,经常需要操作图像。其中一个基本的需求是获取图像中某个像素的坐标和对应的颜色,以便进行后续的处理。本文将介绍如何使用 JavaScript 从图像中获取像素的坐标和颜色。

    7 年前
  • 如何在JavaScript中获取文本框值

    在前端开发中,获取文本框的值是非常常见的操作。通过JavaScript可以轻松地获取文本框的值,从而实现一些有趣的功能。 获取文本框的值 要获取文本框的值,可以使用value属性。

    7 年前
  • replaceState()、setState() 与 React.js

    前言 在前端开发中,我们时常需要管理浏览器的历史记录和更新组件的状态。其中,replaceState() 和 setState() 是两个常用的方法。本文将从多个角度深入探讨这两种方式,并结合 Rea...

    7 年前
  • 遍历 JavaScript 对象键的完整指南

    JavaScript 对象是一种非常重要的数据类型,它们可以存储复杂的数据并提供快速访问。对象由键-值对组成,其中每个键都是唯一的字符串,并且与一个值相关联。在这篇文章中,我们将深入研究如何遍历 Ja...

    7 年前
  • 如何使用JavaScript HTML5画布绘制N条平滑曲线?

    在前端开发中,绘制曲线是一项常见的任务。HTML5 的 Canvas 元素提供了非常强大的绘图 API,使我们能够轻松地创建各种类型的图形,包括线条、矩形、圆形、多边形和复杂的曲线。

    7 年前
  • 有没有什么好的减价的JavaScript库或控制?

    在前端开发中,经常需要处理金额格式和运算。而商品打折、优惠券等也是电商网站常见的功能。因此,减价相关的 JavaScript 库和控件也就应运而生。 常见减价计算方式 在介绍减价的 JavaScrip...

    7 年前

相关推荐

    暂无文章