【JS】事件循环

事件循环(Event Loop)

什么是事件循环

事件循环就是一个执行任务队列的机制

为什么会出现事件循环

为了避免单线程出现阻塞,采用了异步的形式执行任务。为了解决异步任务的问题,采用了事件循环机制。

事件循环的流程

JavaScript是一门单线程的语言,代码执行顺序由上至下依次执行。
当JavaScript代码执行到一个异步操作或事件时,会将其放入对应的任务队列中。
当主线程执行完同步任务后,在任务队列中取出一个异步任务执行。
当任务执行时,可能会产生新的异步操作和事件,这些新的操作也会被放入任务队列中等待执行。
在主线程中的任务执行完成后,再去任务队列取出下一个任务执行,不断循环。
在这里插入图片描述

当主线程执行完同步任务后,在任务队列中取出一个异步任务执行时,并不是根据进入任务队列先后取出,而是先执行微观任务,再执行宏观任务

微任务 宏任务

宏任务包括一些比较耗时的任务,例如setTimeout、setInterval、AJAX请求、DOM事件等等。
微任务指的是一些比较短且需要立即执行的任务,比如Promise的方法等等。

举个栗子

console.log('start')

setTimeout(() => {
    console.log('timeout1')
}, 0)

new Promise((resolve) => {
    console.log('promise1')
    resolve()
}).then(() => {
    console.log('then1')
})

console.log('end')

在这里插入图片描述

解析:Promise对象是同步执行的,所以会输出promise1。但是.then()方法是异步执行的,会被放到任务队列中等待执行,因此end会先输出。然后在任务队列中执行.then()方法,输出then1。最后在任务队列中执行setTimeout中的回调函数,输出timeout1。

参考链接JavaScript:事件循环机制(EventLoop)

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值