js异步编程的理解

这篇文章来谈一下JavaScript中的异步。

1、

什么样的代码叫「异步代码」？

我们先从「表象」来看怎样的代码算异步代码：

书写顺序与执行顺序不同的代码是异步代码（这个定义是不严谨的，因为书写顺序和执行顺序不同的代码实际上并不一定是异步代码，但这里我们只是从表象层面来解释异步代码）

console.log(1)
setTimeout(function() {
  console.log(2)
}, 0)
console.log(3)

上面代码，你执行一下就会发现，执行顺序是：1 -> 3 -> 2。

可书写顺序是：1 -> 2 -> 3。

为什么会出现「代码的书写顺序和执行顺序不一样」这种情况呢？

因为中间的console.log(2)是异步执行的。

2、什么是异步？

异步就是同步的反面。

同步是：一定要等任务执行完了，得到结果，才执行下一任务。

var taskSync = function() {
  return '同步任务的返回值'
}

var result = taskSync() // result就是同步任务的结果
otherTask()  // 然后执行下一个任务

异步：不等任务执行完，直接执行下一个任务。

var taskAsync = function() {
  var result = setTimeout(function() {
    console.log('异步任务的结果')
  }, 3000)
  return result
} 

var result = taskAsync() // result不是异步任务的结果，而是一个timer id
otherTask()  // 不等异步任务结束，立即执行下面任务

这个result不是异步任务的结果，它只是个timer id。

那么要怎样拿到异步任务的结果呢？

用回调。

改下代码：

var taskAsync = function(callback) {
  var result = setTimeout(function() {
    callback('异步任务的结果')
  }, 3000)
  return result
}

taskAsync(function callback(result) {
  console.log(result) // 三秒后，这个callback 函数会被执行。
})
othertask() // 不等异步任务结束，立即执行下面任务

所以，「回调」经常被用于获取「异步任务」的结果。