导航  导航

对于nodejs与浏览器的事件循环的个人理解

作者: 挺帅
发表于:
更新于:

平时开发过程中,对于事件,我们基本只需要知道同步和异步的区别就差不多了,但是如果业务逻辑比较复杂时,不理解事件循环机制的话,很容易掉进坑里。

无奈网上的一些文章文字太多,大多堆砌了太多官方概念,对于我这种看文字就头晕的人,很容易被劝退。

但实在没办法,只能多看几篇文章,硬着头皮去理解,然后用自己的语言来记录一下。


1、js的任务分为宏任务和微任务

宏任务:setTimeout, setInterval, setImmediate, I/O, UI rendering

微任务:process.nextTick, Promise等


2、nodejs事件循环

执行同步任务--->遇到异步任务,把异步任务放进任务队列--->执行宏任务(执行之前检测任务队列里有没有微任务,有则先执行微任务),如此循环。


3、浏览器事件循环

与nodejs的事件循环不同的是,如果宏任务里面包含微任务,则把里面的所有微任务放进队列,然后执行完宏任务里的所有微任务。


下面举一个烂大街的例子:

'use strict';
    console.log(1);

    setTimeout(() => {
        console.log(2)
        new Promise((resolve) => {
            console.log(6);
            resolve(7);
        }).then((num) => {
            console.log(num);
        })
    });

    setTimeout(() => {
        console.log(3);
        new Promise((resolve) => {
            console.log(9);
            resolve(10);
        }).then((num) => {
            console.log(num);
        })

        setTimeout(()=>{
        	console.log(8);
        })
    })

    new Promise((resolve) => {
        console.log(4);
        resolve(5)
    }).then((num) => {
        console.log(num);
        new Promise((resolve)=>{
        	console.log(11);
        	resolve(12);
        }).then((num)=>{
        	console.log(num);
        })
    })


以上代码在nodejs下与浏览器下的执行结果分别是:

nodejs:1、4、5、11、12、2、6、3、9、1、10、8

浏览器:1、4、5、11、12、2、6、7、3、9、10、8


可以明显的看出,浏览器在执行setTimeout时,直接执行了里面的promise。

需要注意的是:promise里的代码属于同步代码,then里面的才是异步代码。

以上结论纯属个人理解,如有错误,请指正。

如果觉得文章还不错,或者对你有帮助的话,那就点个赞呗! 点赞2
向右滑动

全部评论(2)

牛:

1  reply

 2:

2  

昵称:
回复TA:
1:

1  reply

昵称:
回复TA: