JavaScript 的事件机制

Turbo 发布于2019-08-23 11:30 / 2905人阅读

摘要：的事件机制关于，查阅多篇博客，或多或少总有些出入，在此写下自己关于的理解按同步与异步分首先判断是同步还是异步同步就进入主进程异步就进入异步任务在中注册函数当满足触发条件后被推入同步任务进入主线程后一直执行直到主线程空闲时才会去中查看是否有可

JavaScript 的事件机制

关于Event Loop，查阅多篇博客，或多或少总有些出入，在此写下自己关于Event Loop的理解

按同步与异步分

首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table

异步任务在event table中注册函数,当满足触发条件后,被推入event queue

同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中

按宏任务与微任务分（更准确）

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval，setImmediate, I/O, UI rendering

micro-task(微任务)：Promise.then，process.nextTick

许多地方把Promise标记为微任务，但是这容易让人误以为new Promise的时候这个过程是个微任务。其实是Promsie.then、Promise.catch是微任务，new Promise的时候当做普通的生成对象来看待，所以在此我标记为Promise.then

执行本轮个宏任务

过程中如果遇到微任务,是同步任务就将其放到微任务的[事件队列]里，异步放入微任务[事件表]中，注册函数，达到执行条件，推入微任务[事件队列]中（目前为止我还不知道微任务有没有异步任务）

遇到宏任务，是同步任务就将其放到宏任务的[事件队列]里，异步放入宏任务[事件表]中，注册函数，达到执行条件，推入宏任务[事件队列]中

本轮宏任务执行完，查看微任务的[事件队列],并将里面全部的微任务依次执行完,从宏任务[事件队列]中执行下一轮宏任务

相关知识

JS单线程，这线程中只有一个唯一的事件循环

一个线程中，事件循环是唯一的，但是可以有多个任务队列(微任务队列只有一个)

任务队列分宏任务队列与微任务队列

那么问题来了，多个宏任务队列时，下一趟的宏任务该取哪个呢？上述方法中，我是将宏任务都看成一个队列的

Examples

/* example1 */
setTimeout(function () {
    console.log(1);
},7);

new Promise(function (resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
        i == 99 && resolve();
    }
}).then(function () {
    console.log(3);
    setTimeout(() => {
        console.log(4);
    });
})

console.log(5);
// 2 3 5 （4 1） 后两个数字的顺序与两定时器的delayTime有关，谁先满足触发条件就先输出谁 （html5 标准中，规定delayTime >= 4ms）

/* example2 */
setTimeout(_ => console.log(4));

new Promise(resolve => {
    resolve()
    console.log(1)
}).then(_ => {
    console.log(3)
    Promise.resolve().then(_ => {
        console.log("before timeout")
    }).then(_ => {
        Promise.resolve().then(_ => {
            console.log("also before timeout")
        })
    })
})

console.log(2);
// 这个也不难，分析分析就出结果了

finally

综上菜鸡二问

微任务事件队列中存在异步任务嘛？

多个宏任务事件队列，下一轮宏任务时该从哪个宏任务事件队列中取？

这些问题都需在不断的深入了解中才能知道答案
以上就是阅读多篇博客之后个人对Event Loop的一些见解，或有不正确之处，望批评指正

参考
前端基础进阶（十二）：深入核心，详解事件循环机制
10分钟理解JS引擎的执行机制

云服务器 GPU云服务器 javascript的事件事件机制事件冒泡机制事件注册机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97057.html

Javascript系列之javascript机制

摘要：异步任务必须指定回调函数，当异步任务从任务队列回到执行栈，回调函数就会执行。事件循环主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。参考链接：这一次，彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程，JS运行机制...

13651657101 2019-08-22 15:50 评论0 收藏0
JavaScript运行机制和事件循环

摘要：主线程不断重复上面的三步，此过程也就是常说的事件循环。所以主线程代码执行时间过长，会阻塞事件循环的执行。参考资料这一次，彻底弄懂执行机制任务队列的顺序机制事件循环搞懂异步事件轮询与中的事件循环 1. 说明读过本文章后，您能知道： JavaScript代码在浏览器中的执行机制和事件循环面试中经常遇到的代码输出顺序问题首先通过一段代码来验证你是否了解代码输出顺序，如果你不知道输出...

Ververica 2019-08-23 14:42 评论0 收藏0
JavaScript 运行机制详解(理解同步、异步和事件循环)

摘要：从异步过程的角度看，函数就是异步过程的发起函数，事件监听函数就是异步过程的回调函数。事件触发时，表示异步任务完成，会将事件监听器函数封装成一条消息放到消息队列中，等待主线程执行。 1.为什么JavaScript是单线程？ JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScrip...

loonggg 2019-08-20 18:13 评论0 收藏0
JavaScript Event Loop 机制详解与 Vue.js 中实践应用

摘要：机制详解与中实践应用归纳于笔者的现代开发语法基础与实践技巧系列文章。事件循环机制详解与实践应用是典型的单线程单并发语言，即表示在同一时间片内其只能执行单个任务或者部分代码片。 JavaScript Event Loop 机制详解与 Vue.js 中实践应用归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文依次介绍了函数调用栈、MacroTask 与 Micr...

livem 2019-08-21 16:19 评论0 收藏0
JS与Node.js中的事件循环

摘要：的单线程，与它的用途有关。特点的显著特点异步机制事件驱动。队列的读取轮询线程，事件的消费者，的主角。它将不同的任务分配给不同的线程，形成一个事件循环，以异步的方式将任务的执行结果返回给引擎。这两天跟同事同事讨论遇到的一个问题，js中的event loop，引出了chrome与node中运行具有setTimeout和Promise的程序时候执行结果不一样的问题，从而引出了Nodejs的...

abson 2019-08-22 11:14 评论0 收藏0
初窥JavaScript事件机制的实现（一）—— Node.js事件驱动实现概览

摘要：如果当前没有事件也没有定时器事件，则返回。相关资料关于的架构及设计思路的事件讨论了使用线程池异步运行代码。下一篇初窥事件机制的实现二中定时器的实现在浏览器中，事件作为一个极为重要的机制，给予JavaScript响应用户操作与DOM变化的能力；在Node.js中，事件驱动模型则是其高并发能力的基础。学习JavaScript也需要了解它的运行平台，为了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 评论0 收藏0