JavaScript的事件循环机制浅析

更新日期: 2022-03-16阅读: 840标签: 事件

前言

JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作。

类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等。

概念

在JavaScript代码执行过程中,可以分为同步队列和异步队列。

  1. 同步任务类似我们常说的立即执行函数,不需要等待可以直接进行,可以直接进入到主线程中去执行,类似正常的函数调用等。

  2. 异步队列则是异步执行函数,类似ajax请求,我们在发起的过程中,会进入到一个异步队列,加载到任务当中时,需要进行等待,之后才能进行返回值的处理。

举个栗子

下面一段代码,我们可以先了解一些一些关于事件循环机制的一些基本的原理

console.log('1');
setTimeout(function() {
  console.log('4');
}, 0);
Promise.resolve().then(function() {
  console.log('2');
}).then(function() {
  console.log('3');
});
console.log('5');

我们将代码打印到控制台当中,输出结果是:1,5,2,3,4

我们知道,在JavaScript中,类似定时器,以及ES6新增的promise是异步函数,回到我们上面所说的队列的概念当中,不难得出,1和5为同步执行队列

在执行完同步队列中的代码之后,再执行异步队列中的代码。

TIP

在解析异步队列的promise和定时器中,我们发现,定时器 setTimeout 是后执行于 promise ,这里我们引入JavaScript规范中的宏任务 (Macro Task )和微任务 (Micro Task) 的概念

在JavaScript中,宏任务包含了: script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)

微任务:Promise、MutaionObserver、process.nextTick(Node.js 环境)

再回到上面的定时器和promise的问题,这时候我们知道,JavaScript中,当有异步队列的时候,优先执行微任务,再执行宏任务

再次举个栗子

假如在异步队列当中存在异步队列时,我们需要怎么处理

console.log(1);
setTimeout(function() {
  console.log(5);
}, 10);
new Promise(resolve => {
    console.log(2);
    resolve();
    setTimeout(() => console.log(3), 10);
}).then(function() {
    console.log(4);
})
console.log(6);

将代码执行到控制台中,得出的打印顺序是:1,2,6,4,5,3

  • 不同于例子1当中的promise,打印2是优先于6执行的,由此我们可以知道,new Promise在执行过程中,在未执行resolve或者rejected前,所执行的代码均为同步队列中的代码。

  • 再看4,5,3的执行顺序,在执行微任务promise执行回调resolve之后,对应的then立即执行

  • 在打印结果中,定时器5优先执行于---->属于微任务promise中的宏任务定时器3,定时器5这个宏任务是在promise微任务这个队列之后就加进去,在promise执行完成then回调之后,promise中的宏任务才加入到队列当中,因此在定时器5之后执行

总结

在JavaScript中,宏任务包含了: script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)

微任务:Promise、MutaionObserver、process.nextTick(Node.js 环境);

在执行过程中,同步代码优先于其他任务队列中的代码,

定时器,promise这类任务,在执行过程中,会先加入队列,

在执行完同步代码之后,再根据宏任务和微任务的分类,先执行微任务队列,再执行宏任务队列。

文章个人博客地址: JavaScript的事件循环机制


链接: https://fly63.com/article/detial/11263

js中addEventListener事件监听器参数详解

我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...

js监听浏览器返回,pushState,popstate 事件,window.history对象

在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

CSS中的pointer-events属性实现点穿效果

具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发

js鼠标事件参数,获取鼠标在网页中的坐标

事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标

js事件冒泡和默认事件处理(原生js、vue)

何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

js keyup、keypress和keydown事件 详解

js keyup、keypress和keydown事件都是有关于键盘的事件,当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。

深入nodejs-核心模块Events详解(事件驱动)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target

关于鼠标移动太快导致moseleave事件不触发的问题

我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。

Js事件传播流程

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!