异步无处不在：同步模式和异步模式（一）-技术圈

异步无处不在：同步模式和异步模式（一）

勾勾的前端世界

共 1464字，需浏览 3分钟

· 2021-01-13

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

在 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')