前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 异步模式

JavaScript 异步模式

原创
作者头像
菜园前端
修改2023-05-14 21:37:34
3020
修改2023-05-14 21:37:34
举报
文章被收录于专栏:前端学习文档

原文链接:https://note.noxussj.top/?source=cloudtencen

什么是异步模式?

不会等待当前任务执行完毕,才会去执行下一个任务,这就是异步模式(Asynchronous)。开启异步后,就会跳过本任务,开始执行下一个任务,后续的逻辑一般会通过回调函数的方式定义。异步模式执行中,涉及到调用栈(Call stack)、消息队列(Queue)、微任务队列(Microtask Queue)、事件循环(Eevent Loop)、运行环境(浏览器是 WebAPIs)。

现实生活举例

回到同步模式的现实生活举例上,我们可以修改一下验核酸的排队规则,已经准备好三个码的人可以先进入队列中进行排队,还没准备好的先站在旁边弄,什么时候弄好了就什么时候在去队伍中排队验核酸。这样就可以大大节省了大家的时间。

优点

主要解决同步模式造成的阻塞问题

缺点

代码的执行顺序混乱,并非从上往下一个个执行,有时候无法得知谁先执行谁后执行,所以不易于阅读和理解。

异步方案

  • ES2015 提供的 Pormise 方案
  • ES2015 提供的 Generator
  • ES2017 提供的 Async / Await 语法糖(可以写出更扁平的异步代码)

基础案例

代码语言:javascript
复制
console.log('global begin')

setTimeout(() => {
    console.log('timer1 invoke')
}, 1800)

setTimeout(() => {
    console.log('timer2 invoke')

    setTimeout(() => {
        console.log('inner invoke')
    }, 1000)
}, 1000)

console.log('global end')

输出结果:

代码语言:javascript
复制
global begin
global end
timer2 invoke
timer1 invoke
inner invoke

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是异步模式?
  • 异步方案
  • 基础案例
相关产品与服务
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档