首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js的事件轮询机制

JavaScript 的事件轮询机制,也称为事件循环(Event Loop),是 JavaScript 运行时环境(如浏览器或 Node.js)处理异步操作的核心机制。

基础概念: 事件循环负责协调执行同步代码、异步操作回调以及定时器等。JavaScript 是单线程的,意味着一次只能执行一个任务,但通过事件循环可以实现非阻塞的异步操作。

优势:

  • 避免了线程阻塞,提高了程序的响应性和性能。
  • 简化了异步编程的复杂性,使代码更易于理解和维护。

类型:

  • 宏任务(Macrotask):包括整体代码块、setTimeout、setInterval、I/O 操作、UI 渲染等。
  • 微任务(Microtask):包括 Promise 的 then/catch/finally 回调、process.nextTick(Node.js 中)等。

应用场景:

  • 处理用户交互事件,如点击、滚动等。
  • 进行网络请求并在请求完成后更新页面。
  • 实现定时任务,如每隔一段时间执行某些操作。

事件循环的执行过程大致如下:

  1. 执行一个宏任务(初始时是整个脚本)。
  2. 执行所有的微任务。
  3. 如果有必要,进行 UI 渲染。
  4. 开始下一个宏任务。

当遇到一些与事件循环相关的问题,例如异步操作未按预期执行: 可能的原因包括:

  • 回调函数中的错误导致后续代码未执行。
  • 定时器设置的时间不准确或被清除。
  • 异步操作的顺序理解有误。

解决方法:

  • 使用调试工具检查错误信息。
  • 仔细检查定时器的设置和相关逻辑。
  • 理清异步操作的流程和依赖关系。

以下是一个简单的示例代码,展示了事件循环中宏任务和微任务的执行顺序:

代码语言:txt
复制
console.log('start');

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

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

console.log('end');

输出顺序将是:

代码语言:txt
复制
start
end
promise then
setTimeout

这是因为先执行同步代码(console.log('start')console.log('end')),然后执行微任务(Promisethen 回调),最后执行宏任务(setTimeout 回调)。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

zigbee协议栈 任务、事件与轮询机制

全zigbee协议栈最重要的就是 void osal_start_system( void )函数,整个轮询机制也在这个函数中被完成 第5行,定义了一个变量idx,用来标识任务,(如任务0),用来在事件表和函数表中索引...idx对应的事件不为空,当找到任务idx的事件不为空时停止遍历,转而去调用该任务的事件处理函数,不妨设此时的idx = 8; 第19~22行,将该任务8的事件取出来放到events变量中,由于事件值被取出来了...同时,任务处理函数的返回值也是任务值,UINT16,返回的是未被处理的具体事件。 第32行,将任务8未被处理的具体事件放回事件表中任务8对应的事件元素中。...然而,以上的机制可以解释Zigbee是怎样处理一个任务下面的事件的,但处理后的事件表是被清零的,那是谁来给任务的这些事件来置一呢?...[ZDAppTaskID] = 0x0001,这样当进入轮询时就会调用事件处理函数处理该事件。

48110

息息相关的 JS 同步,异步和事件轮询

请记住setTimeout不是JS引擎的一部分,它是Web Api的一部分。 为了理解这段代码是如何执行的,咱们必须理解更多的概念,比如事件轮询和回调队列(或消息队列)。 ?...事件轮询、web api和消息队列不是JavaScript引擎的一部分,而是浏览器的JavaScript运行时环境或Nodejs JavaScript运行时环境的一部分(对于Nodejs)。...但是回调不会立即执行,这就是事件轮询开始的地方。 事件轮询 事件轮询的工作是监听调用堆栈,并确定调用堆栈是否为空。如果调用堆栈是空的,它将检查消息队列,看看是否有任何挂起的回调等待执行。...同样,事件轮询检查调用堆栈是否为空,并在调用堆栈为空并执行回调时将事件回调推送到堆栈。 延迟函数执行 咱们还可以使用setTimeout来延迟函数的执行,直到堆栈清空为止。...小结 因此,咱们了解了异步 JS 是如何工作的,以及调用堆栈、事件循环、消息队列和任务队列等概念,这些概念共同构成了 JS 运行时环境。

9.8K31
  • js事件流机制

    从这个图里面我们可以清晰的看到整个事件流的执行过程,首先是从window开始,一步步的从上向下执行,此过程就是事件捕获阶段,当到达了事件的位置以后则处于事件目标阶段,之后会在向上冒泡,进入事件的冒泡阶段...触碰完成以后再把手拿出来,正好是一个相反的过程,这就与我们的事件流机制是一个道理。 事件绑定 下面来看一下下面这个示例代码: 事件处理程序的阶段:1 捕获;2 处于阶段;3 冒泡阶段;这个属性的变化需要在断点中查看,不然你看到的总是0 2 target 返回触发此事件的元素(事件的目标节点)。...事件委托 不知道大家在平时的使用的时候有没有遇到过这样的一种情况,如果事件涉及到更新HTML节点或者添加HTML节点的时候,就会出现这样的一种情况,新添加的节点无法绑定事件,更新的节点也是无法绑定事件,...,所应用的就是事件的冒泡。

    1.5K20

    ajax 长轮询_js 轮询

    ,这依然是有问题的; 【2.2】http 短轮询 1)介绍:http 短轮询是 server 收到请求 不管是否有数据到达都直接响应http 请求;如果浏览器收到的数据为空,则隔一段时间,浏览器又会发送相同的...http请求到server 以获取数据响应; 2) http 短轮询的缺点:消息交互的实时性较低(server端到浏览器端的数据反馈效率低); 【2.3】http 长轮询 和 短轮询的异同 1)相同点...:当server 的数据不可达时,基于http长轮询和短轮询 的http请求,都会 停留一段时间; 2)不同点:http长轮询是在服务器端的停留,而http 短轮询是在 浏览器端的停留; 3)性能总结...:从这里可以看出,不管是长轮询还是短轮询,都不太适用于客户端数量太多的情况,因为每个服务器所能承载的TCP连接数是有上限的,这种轮询很容易把连接数顶满; 【3】WebSocket 1)介绍:WebSocket...无需循环等待(长轮询),CPU和内存资源不以客户端数量衡量,而是以客户端事件数衡量。

    3.9K20

    Js的长轮询

    长轮询(Long polling) 长轮询是与服务器保持持久连接的最简单的方式,它不使用任何特定的协议,例如 WebSocket 或者 Server Sent Event。...---- 常规轮询 从服务器获取新信息的最简单的方式是定期轮询。也就是说,定期向服务器发出请求:“你好,我在这儿,你有关于我的任何信息吗?”例如,每 10 秒一次。...就性能而言,这是一个很大的负担。 因此,如果我们讨论的是一个非常小的服务,那么这种方式可能可行,但总的来说,它需要改进。 ---- 长轮询 所谓“长轮询”是轮询服务器的一种更好的方式。...因此,过多的连接会消耗掉全部内存。 使用像 PHP 和 Ruby 语言编写的后端程序会经常遇到这个问题。 使用 Node.js 编写的服务端程序通常不会出现此类问题。 也就是说,这不是编程语言的问题。...大多数现代编程语言,包括 PHP 和 Ruby,都允许实现更适当的后端程序。只是请确保你的服务器架构在同时有很多连接的情况下能够正常工作。 ---- 使用场景 在消息很少的情况下,长轮询很有效。

    1.7K20

    JS:事件循环机制(Event Loops)

    其实,在 JavaScript 中,代码的执行顺序并不是完全按照它们的书写顺序,而是取决于它们在 **事件循环** 中的顺序。 2. **什么是事件循环?...一个遵循 ECMAScript 标准的代理(浏览器或 JS 引擎)也必须遵循事件循环机制。 事件循环是由一个或以上的 **任务队列** 组成的。 3. **什么是任务队列?...) * `` 由于当前任务队列已经处于执行状态,所以任务队列中遇到的宏任务将进入到下一次事件循环的任务队列,而微任务则会被放入到本次事件循环的微任务队列中。...每次事件循环都会有一个初始为空的微任务队列。...测试题 看到这里,JavaScript 的事件循环机制差不多就解释完了,涉及到了同步任务、异步任务、宏任务和微任务以及它们之间的关系。

    1.9K10

    Linux内核MMC里的轮询机制

    从这篇文章你能学到如何使用MMC框架里的轮询机制做探卡检测,十分简单。 1 前言 最近遇到客户提的一个问题,大概意思是他们的SDIO Wi-Fi在卸载Wi-Fi驱动后再加载就检测不到Wi-Fi设备了。...#define MMC_CAP_NEEDS_POLL (1 << 5) /* Needs polling for card-detection */ 2 如何使用MMC里的轮询机制做探卡检测?...方法二:通过其他手段设置host->caps |= MMC_CAP_NEEDS_POLL 3 MMC里的轮询机制剖析 3.1 在dts设置broken-cd字段,代码在哪里解析?...,如果设置了MMC_CAP_NEEDS_POLL,也就是轮询机制,就会每隔HZ(这是个宏)时间执行一次host->detect,也就是mmc_rescan。...总结 对于探卡检测,通过在dts里面配置broken-cd就可以实现轮询探卡检测。

    2.2K10

    传统轮询、长轮询、服务器发送事件与WebSocket

    注意 长轮询与以下将要提到的服务器发送事件和WebSocket不能仅仅依靠客户端JavaScript实现,我们同时需要服务器支持并实现相应的技术。...一旦连接建立,“事件”便会自动被推送到客户端。服务器端SSE通过“事件流(Event Stream)”的格式产生并推送事件。...这里为了略过协议解析的具体细节,我们采用Node.js的ws库来实现简单的WebSocket服务器。...SSE Support 下面总结一下四种通信方式的优缺点: > 传统轮询 长轮询 服务器发送事件 WebSocket 浏览器支持 几乎所有现代浏览器 几乎所有现代浏览器 Firefox 6+ Chrome...与传统轮询相似,但是占用带宽较少 与长轮询相似,除非每次发送请求后服务器不需要断开连接 无需循环等待(长轮询),CPU和内存资源不以客户端数量衡量,而是以客户端事件数衡量。

    3K30

    Nacos 长轮询定时机制

    ,其中上篇讲获取配置与事件订阅机制,下篇讲长轮询定时机制;在《微服务架构 | 2.2 Alibaba Nacos 的统一配置管理》中提到一张 Nacos 动态监听的长轮询机制原理图,本篇将围绕这张图剖析长轮询定时机制的原理...; ConfigService 是 Nacos 客户端提供的用于访问实现配置中心基本操作的类,我们将从 ConfigService 的实例化开始长轮询定时机制的源码之旅; ---- 1....客户端的长轮询定时机制 我们从上一篇文章的这里开始【断点步入】; NacosPropertySourceLocator.locate(); 1.1 利用反射机制实例化 NacosConfigService...服务端的长轮询定时机制 2.1 服务器接收请求 ConfigController.listener() Nacos客户端 通过 HTTP 协议与服务器通信,那么在服务器源码里必然有对应接口的实现; 在...; 3.2 服务端的长轮询定时机制 ConfigController.listener():服务器接收请求; LongPollingService.addLongPollingClient():长轮询的核心处理逻辑

    1.1K20

    js事件循环机制和优先级

    浏览器的渲染进程是多线程,包括 GUI渲染线程 js引擎线程 事件触发线程 定时器触发线程 异步http请求线程 主执行栈和任务队列 所有的任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即执行的任务...,同步任务一般会直接进入到主线程中执行;而异步任务,就是异步执行的任务,比如ajax网络请求,setTimeout 定时函数等都属于异步任务,异步任务会通过任务队列( Event Queue )的机制来进行协调...宏任务 (macro)task(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。...microtask主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境) 它们的执行顺序如下: 在事件循环中,每进行一次循环操作称为...,立即执行当前微任务队列中的所有微任务(依次执行) 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取) 宏任务与微任务的优先级(

    1.5K20

    Js 的事件循环(Event Loop)机制以及实例讲解

    前言 大家都知道js是单线程的脚本语言,在同一时间,只能做同一件事,为了协调事件、用户交互、脚本、UI渲染和网络处理等行为,防止主线程阻塞,Event Loop方案应运而生… 公众号里面的文章不能添加外部链接...个人博客了解一下:obkoro1.com ---- 为什么js是单线程? js作为主要运行在浏览器的脚本语言,js主要用途之一是操作DOM。...循环') } console.log('c事件执行完') } a(); b(); c(); // 当a、b、c函数都执行完成之后,三个setTimeout才会依次执行 ---- js 异步执行的运行机制...根据本文的内容,可以很轻松,且有理有据的猜出写出正确答案:2,4,3,1. 忍者秘籍 ---- 结语 类似上文的面试题还有很多,实则都大同小异,只要掌握了事件循环的机制,这些问题都会变得很简单。...以上2018.6.16 参考资料: 详解JavaScript中的Event Loop(事件循环)机制 JavaScript中的事件循环 Event Loop JavaScript 运行机制详解:再谈Event

    1.7K10

    Go语言 Go的网络轮询及IO机制

    然而,不幸的是,操作系统提供的阻塞式I/O并不适合构建我们自己的阻塞式I/O接口(interface)。 在我之前有关Go运行时的文章中,其中一篇介绍了Go调度器如何处理系统调用。...为了处理一个阻塞式的系统调用,我们需要一个操作系统线程,因此如果要在OS的I/O层之上构建我们自己的阻塞式I/O层,则需要为每一个goroutine客户端连接产生一个新的线程,因为这些连接执行系统调用的时候会阻塞...网络轮询(Netpoller) 将异步式I/O转为阻塞式I/O是通过网络轮询(netpoller)这个部分来完成的,netpoller在自己的线程中,接收那些准备进行网络I/O的goroutines发来的消息...,netpoller使用操作接口提供的接口来提供对网络sockets的轮询。...这些接口的共同之处是它们为用户空间轮询网络IO状态提供了非常高效的方法。 无论何时在Go程序中打开或者接受一个连接,该连接背后的文件描述符都被设置为非阻塞模式。

    1.6K70

    Go语言 Go的网络轮询及IO机制

    然而,不幸的是,操作系统提供的阻塞式I/O并不适合构建我们自己的阻塞式I/O接口(interface)。 在我之前有关Go运行时的文章中,其中一篇介绍了Go调度器如何处理系统调用。...为了处理一个阻塞式的系统调用,我们需要一个操作系统线程,因此如果要在OS的I/O层之上构建我们自己的阻塞式I/O层,则需要为每一个goroutine客户端连接产生一个新的线程,因为这些连接执行系统调用的时候会阻塞...网络轮询(Netpoller) 将异步式I/O转为阻塞式I/O是通过网络轮询(netpoller)这个部分来完成的,netpoller在自己的线程中,接收那些准备进行网络I/O的goroutines发来的消息...,netpoller使用操作接口提供的接口来提供对网络sockets的轮询。...这些接口的共同之处是它们为用户空间轮询网络IO状态提供了非常高效的方法。 无论何时在Go程序中打开或者接受一个连接,该连接背后的文件描述符都被设置为非阻塞模式。

    1.3K120

    深入理解 Node.js 事件循环机制

    Node.js 的事件循环是其核心机制,负责处理异步事件和回调函数。本文将带您深入理解 Node.js 事件循环的内部工作原理。事件循环的基本概念事件循环是 Node.js 实现异步非阻塞操作的关键。...事件循环的存在,使得 Node.js 能够在处理高并发和网络 I/O 密集型任务时,不会因为某个操作而阻塞整个程序的执行。...这种机制让 Node.js 成为了构建高性能网络应用程序的理想选择,尤其是在需要处理大量并发连接的场景,如 Web 服务器、实时通信系统等。...事件循环是怎么用作的Node.js 事件循环的工作流程可以分为以下几个阶段:Timers 阶段:处理 setTimeout 和 setInterval 定时器的回调函数。...了解了nodejs的循环机制,在开发就需要根据这个机制进行合理高效开发,需要注意一下几个原则避免长时间运行的计算任务:长时间运行的计算任务会阻塞事件循环,导致其他任务无法及时执行。

    30430

    nodejs的事件处理机制以及事件环机制

    nodejs的事件处理机制以及事件环机制 ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS...1.EventEmitter类 在Node.js中用于事件处理的event模块中,定义了一个EventEmitter类.所有可能触发的事件都是EventEmitter类子类的实例对象,EventEmitter...事件环机制 事件循环定义:当线程中的I/O任务完成之后就会执行指定的回调函数,并且将这个完成的事件放在事件队列的尾部,等待事件循环,当主线程再次循环到这个事件的时候,就会直接处理并且返回给上层调用,这个过程就是事件循环...LIBUV层:是跨平台的底层封装,实现了 事件循环、文件操作等,是 Node.js 实现异步的核心。...在Node.js的内部是通过线程池来完成I/O操作的,但是LIBUV层会针对不同的操作系统平台的差异性实现了统一调用,Node.js的单线程指的是JavaScript运行在单线程中,并不是说Node.js

    99810
    领券