异步无处不在:同步模式和异步模式(一)

勾勾的前端世界

共 1464字,需浏览 3分钟

 ·

2021-01-13 14:14

嗨,我是你稳定更新、持续输出的勾勾。



在 JS 代码中,异步无处不在,比如 Ajax 通信,Node 中的文件读写等等。而只有搞清楚异步编程的原理和概念,才能在 JS 的世界中任意驰骋,随便撒欢。


单线程 JavaScript 异步方案


首先我们要了解,JavaScript 代码的运行是单线程


采用单线程模式工作的原因也很简单,最早是为了在页面中实现 Dom 操作。如果采用多线程,就会造成复杂的线程同步问题。如果一个线程修改了某个元素,另一个线程又删除了这个元素,浏览器渲染就会出现问题。


单线程的含义就是,JS 执行环境中负责执行代码的线程只有一个。类似于只有一个人干活。他一次只能做一个任务,如果有多个任务自然是要排队的。


优点:安全,简单。

缺点:遇到任务量大的操作,会阻塞。后面的任务会长时间等待,出现假死的情况。



为了解决阻塞的问题,Javascript 将任务的执行模式分成了两种,同步模式( Synchronous)和 异步模式( Asynchronous)。


同步模式与异步模式


在程序中,代码依次执行,后面的任务需要等待前面任务执行结束后,才会执行。同步并不是同时执行,而是排队执行。


先来看一段代码:

console.log('global begin')function bar ({  console.log('bar task')}function foo ({  console.log('foo task')  bar()}foo()console.log('global end')


用动画形式展现下同步代码的执行过程:



如图所示,代码会按照既定的语法规则,依次执行。如果中间遇到大量复杂任务,后面的代码则会阻塞等待。


再来看一段异步代码:

console.log('global begin')
setTimeout(function timer1 () { console.log('timer1 invoke')}, 1800)
setTimeout(function timer2 () { console.log('timer2 invoke') setTimeout(function inner () { console.log('inner invoke') }, 1000)}, 1000)
console.log('global end')


异步代码的执行,要相对复杂一些。



代码首先按照同步模式执行,当遇到异步代码时,会开启异步执行线程。


在上面的代码中,setTimeout 会开启环境运行时的执行线程运行相关代码。代码运行结束后,会将结果放入到消息队列,等待 JS 线程结束后,消息队列的任务再依次执行。


流程图如下:



下篇,我们来聊聊回调函数和异步方案。

周一见(ง •_•)ง。


推荐阅读:

Redux 续集 | 如何搞定其中的异步操作?

老生常谈的 Redux

技术人年度总结 | 2020,注定不平凡

2020 最后一篇技术文:可爱的乌咪 UmiJS

如何设计路由权限?

是我 Web 端配不上阿里了。

不可避免的问题:React 的路由如何抽离?

前端人因为 Vue3 的 Ref-sugar 提案打起来了!


点点“”和“在看”,保护头发,减少bug。

浏览 22
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报