JS异步编程

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

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

回调函数（Callback）

定义：函数A作为参数 (函数引用)传递到另一个函数B中，并且这个函数B执行函数A。
```
@H_404_21@ajax(url, () => {
// 处理逻辑
})
```
缺点
- 回调地狱问题
  - 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
  - 嵌套函数一多，就很难处理错误
- 不能使用 try catch 捕获错误
- 不能直接 return

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

Generator
Promise
async 及 await
常用定时器函数

Generator

Generator 最大的特点就是可以控制函数的执行。
```
@H_404_21@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 的时候，构造函数内部的代码是立即执行的。

@H_404_21@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() 包装。
```
@H_404[email protected](1)
	.then(res => {
		console.log(res) // => 1
		return 2 // 包装成 Promise.resolve(2)
	})
	.then(res => {
		console.log(res) // => 2
	})
```
缺点：无法取消 Promise ，错误需要通过回调函数捕获。

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

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

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

async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then中处理返回值一样，并且 await 只能配套async 使用。
```
@H_404_21@async function test() {
	let value = await sleep()
}
```
优点在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。
缺点在于 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。
```
@H_404_21@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 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题。

JS异步编程

JS异步编程

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

回调函数（Callback）

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

Generator

Promise

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

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

相关推荐