JS通过事件循环实现异步(附例子)

本文介绍了JavaScript作为单线程语言如何通过Event Loop实现异步处理,将任务分为同步和异步,并详细阐述了宏任务(Macro Task)与微任务(Micro Task)的区别,包括setTimeout、Promise等在事件循环中的执行顺序。通过示例代码帮助读者理解这一机制。
摘要由CSDN通过智能技术生成
  • JS是单线程
    前一个任务执行完才能执行下一个任务,同一个时刻只能处理一个任务。js的宿主环境是多线程的浏览器、Node等,执行期环境是JS引擎。

  • JS通过Event loop实现异步。

  • JS分类
    JS将任务分为同步和异步,异步任务可以是文件上传和下载、ajax操作等。

  • JS的执行机制
    是Event Loop(事件循环):

1.同步任务进入主线程中,形成执行栈(Execution Context Stack)。异步任务进入事件表(Event Table)中注册函数。
2.当事件表中有结果返回时,此函数进入事件队列(Event queue)里。
3.主线程的任务都执行完成后,读Event queue里的函数,放入主线程执行。
以上过程不断循环。
  • JS分类
    JS也分为宏任务(Macro Task)和微任务(Micro Task)。
    宏任务包含scipt(整体脚本),setTimeout,setInterval等
    微任务包含Promise,process.nextTick等
  • 执行机制:
    有微任务执行微任务,无微任务执行宏任务。
  • 举例说明附录代码的执行顺序。
第一轮:
此时无微任务,整体脚本作为一个宏任务进入主线程,输出1。
【输出:1】
【宏任务event queue:空】
【微任务event queue:空】

setTimeout作为宏任务放入宏任务event queue中,记为setTimeout1。
【输出:1】
【宏任务event queue:setTimeout1】
【微任务event queue:空】

process.nextTick作为微任务放入微任务event queue中。
【输出:1】
【宏任务event queue:setTimeout1】
【微任务event queue:nextTick1】

此时整体脚本的宏任务还未执行完,继续执行。Promise输出7,then作为微任务放入微任务event queue中,记为then1。
【输出:1,7】
【宏任务event queue:setTimeout1】
【微任务event queue:nextTick1,then1】

setTimeout作为宏任务放入宏任务event queue中,记为setTimeout2。
【输出:1,7】
【宏任务event queue:setTimeout1,setTimeout2】
【微任务event queue:nextTick1,then1】

此时整体脚本的宏任务执行结束,有微任务,执行微任务nextTick1和then1,输出6,8。
【输出:1,7,6,8】
【宏任务event queue:setTimeout1,setTimeout2】
【微任务event queue:空】

第二轮:
此时没有微任务,执行宏任务setTimeout1。setTimeout1输出2,process.nextTick作为微任务放入微任务event queue中,记为nextTick2,Promise输出4,回调函数then作为微任务放入微任务event queue中,记为then2。
【输出:1,7,
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值