JS异步编程

JS异步编程

并发（concurrency）和并行（parallelism）区别

• 并发是宏观概念，我分别有任务 A 和任务 B，在一段时间内通过任务间的切换完成了这两个任务，这种情况就可以称之为并发。
• 并行是微观概念，假设 CPU 中存在两个核心，那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行。

回调函数（Callback）

• 定义：函数A作为参数 (函数引用)传递到另一个函数B中，并且这个函数B执行函数A。

  ajax(url, () => {
  // 处理逻辑
  })
  

• 缺点

  • 回调地狱问题
    • 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
    • 嵌套函数一多，就很难处理错误
  • 不能使用 try catch 捕获错误
  • 不能直接 return

解决回调地狱的方法（异步编程）

• Generator

• Promise

• async 及 await

• 常用定时器函数

Generator

• Generator 最大的特点就是可以控制函数的执行。

  function *foo(x) {
      let y = 2 * (yield (x + 1))
      let z = yield (y / 3)
      return (x + y + z)
  }
  let it = foo(5)
  console.log(it.next()) // => {value: 6, done: false}
  console.log(it.next(12)) // => {value: 8, done:false}
  console.log(it.next(13)) // => {value: 42, done:true}
  

  • 首先 Generator 函数调用和普通函数不同，它会返回一个迭代器
  • 当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6
  • 当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参， yield 永远返回undefined 。此时 let y = 2 * 12 ，所以第二个 yield 等于 2 * 12 / 3 = 8
  • 当执行第三次 next 时，传入的参数会传递给 z ，所以 z = 13, x = 5, y = 24 ，相加等于 42

Promise

• 三种状态：等待中（pending）；完成了 （resolved）；拒绝了（rejected）。状态一旦改变成其他状态就不能再次改变。

• 在构造 Promise 的时候，构造函数内部的代码是立即执行的。

  new Promise((resolve, reject) => {
      console.log('new Promise')
      resolve('success')
  })
  console.log('finifsh')
  // new Promise -> finifsh
  

• Promise 实现了链式调用，也就是说每次调用 then 之后返回的都是一个 Promise ，并且是一个全新的 Promise ，原因也是因为状态不可变。如果你在 then 中 使用了 return ，那么 return 的值会被 Promise.resolve() 包装。

  Promise.resolve(1)
  	.then(res => {
  		console.log(res) // => 1
  		return 2 // 包装成 Promise.resolve(2)
  	})
  	.then(res => {
  		console.log(res) // => 2
  	})
  

• 缺点：无法取消 Promise ，错误需要通过回调函数捕获。

async 及 await（异步终极解决方案）

• 一个函数如果加上 async ，那么该函数就会返回一个 Promise。

  async function test() {
  	return "1"
  }
  console.log(test()) // -> Promise {<resolved>: "1"}
  

• async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then中处理返回值一样，并且 await 只能配套async 使用。

  async function test() {
  	let value = await sleep()
  }
  

• 优点在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。

• 缺点在于 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。

  let a = 0
  let b = async () => {
      a = a + await 10
      console.log('2', a) // -> '2' 10
  }
  b()
  a++
  console.log('1', a) // -> '1' 1
  

  解释：

  • 首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为 await 内部实现了 generator， generator 会保留堆栈中东西，所以这时候 a = 0 被保存了下来。
  • 因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成 Promise.reslove(返回值) ，然后会去执行函数外的同步代码。
  • 同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10。

• await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 generator。

常用定时器（setTimeout、setInterval、requestAnimationFrame）

• setTimeout 是延时多久，那就应该是多久后执行是错误的。因为JS是单线程执行的，如果前面的代码影响了性能，就会导致 setTimeout不会按期执行。
• setInterval（不建议使用）是每隔一段时间执行一次回调函数。由于其不能保证在预期的时间执行任务而且存在执行累积的问题，通常来说不建议使用 setInterval。
• 如果定时器执行过程中出现了耗时操作，多个回调函数会在耗时操作结束以后同时执行，这样可能就会带来性能上的问题。
• requestAnimationFrame是完成循环定时器的需求。
  • 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题。