JS 浅谈事件循环机制

一、JS事件循环机制中,首先记住一个执行顺序公式:【同】->【微】->【宏】

1 同步:一等公民(SVIP)

2 微任务:二等公民(VIP)

3 宏任务:三等公民(普通用户)

二、什么是事件循环机制

简单说,就是在执行栈中(依次压入栈里的代码先行执行)执行完毕后,再去找微任务执行,最后再找宏任务执行。

所有进入这三个栈内的被称为任务队列。

具体内容可自行搜索,网上太多

三、到底怎么进入各自的队列呢?

程序的执行顺序是自上至下,同步执行(一行一行执行),遇到异步,就跳过(异步自己去等待执行,比如ajax,settimeout,promise.then(),注意我说的不是Promse,而是我们常用到的promise.then()方法)

3.1 同步列队:

var i =0;

function(){}

console(),

promise(),promise本身是同函数一等公民,它是同步的,因为人家本来就是函数,所以内部的内容优先执行但是promise.then(),promise.catch(),promise.finally()这三个是微任务,记住就好。

其它正常的js代码

3.2 微任务列队

promise.then(),promise.catch(),promise.finally(),这三兄弟一家的,就这么写吧

awaitasync

注意:微任务可没有Promise()人家是一等公民

3.3 宏任务列队

set家族:setTimeoutsetIntervalsetImmediate(NodeJs),

注意:setTimeout有个规定,时间小的优先执行,且其子内容都一起优先进入队列中

 I/O

UI rendering

dom事件

ajax

===========(分装完毕)=====================================

猥琐发育,别浪

四,检测看看如何分辨,做题

4.1


console.log(1)

setTimeout(function(){
    console.log(4);
})
console.log(5)

这个很简单:1   5    4 

按顺序进入栈

1 同步队列

console.log(1)

console.log(5)

2 setTimeout()

4.2


console.log(1)

setTimeout(function(){
    console.log(100);
},500)

setTimeout(function(){
    console.log(300);
},100)


console.log(5)

答案

1,5,300,100

时间短的优先执行

4.3 

console.log(1);
console.log(2);

setTimeout(function(){
    console.log(3);
    setTimeout(function(){
        console.log(6);
    })
})
setTimeout(function(){
    console.log(4);
    setTimeout(function(){
        console.log(7);
    })
})
console.log(5)

答案

1,2,5,3,46,7

同步:1,2,5

微:无

宏:第一层setTimeout(3,4),其次再执行内部的setTimeout,又因为没有时间,所以依然从上到下进入队列,又因为,先进的先执行,6先进,故,结果是6,7

4.4 

console.log(1);
console.log(2);

setTimeout(function(){
    console.log(3);
    setTimeout(function(){
        console.log(6);
    })
},400)
setTimeout(function(){
    console.log(4);
    setTimeout(function(){
        console.log(7);
    })
},100)
console.log(5)

 答案:

1,2,5

4,7 (它们时间短,他们先入栈,并先执行)

3,6(时间长,后执行)

刚才说了,setTimeout时间短的先执行,且子内容也一起进入栈,故4,7先输出,然后再执行第一个setTimeout:3,6

 4.5


console.log(1)

let promise = new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(data){
    console.log(data)
})

setTimeout(function(){
    console.log(4);
})

console.log(5)

答案

1,2,5 

3 promise.then()方法为微任务,即先执行(同->微->宏)

4 宏任务 

promise(),它就是个普通函数,一等公民,所以要跟着同步入栈,即优先执行,故要输出1,2,再输出5

但promise.then()是微任务,又因为,同->微->宏,所以输出3(3是因为promise内有resolve(3)),最后输出4

最后来总结回顾一下:

  1. 所有同步任务都在主线程上执行,形成一个执行栈。

  2. 主线程之外,还存在一个任务队列。只要异步任务有了运行结果,就在任务队列之中放置一个事件。

  3. 一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,将队列中的事件放到执行栈中依次执行。

  4. 主线程从任务队列中读取事件,这个过程是循环不断的。

 记住:【同】->【微】->【宏】

猜你喜欢

转载自blog.csdn.net/tdjqqq/article/details/124384974