JavaScript异步编程（一）：同异步执行原理过程_异步代码执行过程-优快云博客

本文链接：https://blog.youkuaiyun.com/qiyuancoder/article/details/112063923

JavaScript（以下简称js）是单线程语言，啥叫单线程？

一本正经的解释就是：在js代码执行环境中，执行代码的线程只有一个，因为设计初衷就是为了操作DOM元素，假设js是多线程语言，那么如果两个线程任务同时操作一个DOM元素，一个修改一个删除，浏览器将不知道以哪个为准。

假想解释就是：一辆车在路上跑，只能由一个司机开。如果多个司机开，一个司机把方向盘往左扭一个往右扭，一个猛的踩油门一个猛的踩刹车，那么这个车是不是要完犊子了？

既然js是单线程语言，所以有多个任务时（先不考虑异步），只能排队一个个按顺序执行。

优点：安全简单；缺点：一个任务耗时阻塞，后面的任务都会只能在等待，无法执行。

为解决异步请求、文件加载等耗时长的任务阻塞后边任务的问题，js执行模式分为同步模式和异步模式。

同步模式：一个个任务从上到下，按序执行，与代码编写顺序一致。

同步模式执行过程举例：

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') 被压入调用栈，执行完毕后弹出；
函数声明或变量等声明不会被立即调用，会直接跳过；
foo函数被压入调用栈；
foo函数中， console.log('foo task') 被压入调用栈，执行完毕后弹出；
foo函数中，bar函数被压入调用栈；
bar函数中 console.log('bar task') 被压入调用栈，执行完毕后弹出；
bar函数中任务已执行完毕，bar函数弹出调用栈；
foo函数中任务已执行完完毕，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')