理解JavaScript 事件机制的详细分析-js教程-PHP中文网

理解JavaScript 事件机制的详细分析

不言

发布： 2018-08-27 10:44:12

原创

1487人浏览过

本篇文章给大家带来的内容是关于理解javascript 事件机制的详细分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

按同步与异步分

首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table
异步任务在event table中注册函数,当满足触发条件后,被推入event queue
同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中

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

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

立即学习“Java免费学习笔记（深入）”；
micro-task(微任务)：Promise.then，process.nextTick

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

执行本轮个宏任务

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

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

卡拉OK视频制作
卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

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 7） 后两个数字的顺序与两定时器的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);
// 这个也不难，分析分析就出结果了

登录后复制