day04-面试准备-JS 异步编程及常考面试题-2022年4月10日12:13:07

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

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

回调函数（Callback）

例子如下：

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

缺点：容易写出回调地狱（Callback hell）。

例如：

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

回调地狱的根本问题就是：

1. 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
2. 嵌套函数一多，就很难处理错误

生成器（Generator）

生成器是ECMAScript 6新增的一个极为灵活的结构，拥有在一个函数块内暂停和恢复代码执行的能力。这种新能力具有深远的影响，比如，使用生成器可以自定义迭代器和实现协程。

生成器的形式是一个函数，函数名称前面加一个星号（＊）表示它是一个生成器。只要是可以定义函数的地方，就可以定义生成器。

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

可以通过Generator函数解决回调地狱的问题，可将上述回调地狱代码改写成如下形式 ：

function *fetch() {
  yield ajax(url, () => {})
  yield ajax(url, () => {})
  yield ajax(url, () => {})
}
let it = fetch();
let result1 = it.next()

Promise

Promise 翻译过来就是期约的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是：

1. 等待中（pending）
2. 完成了 （resolved）
3. 拒绝了（rejected)

待定（pending）是期约的最初始状态。在待定状态下，期约可以落定（settled）为代表成功的兑现（fulfilled）状态，或者代表失败的拒绝（rejected）状态。无论落定为哪种状态都是不可逆的。只要从待定转换为兑现或拒绝，期约的状态就不再改变。而且，也不能保证期约必然会脱离待定状态。因此，组织合理的代码无论期约解决（resolve）还是拒绝（reject），甚至永远处于待定（pending）状态，都应该具有恰当的行为。

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

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

也可以通过Promise将之前的回调地狱改写如下

ajax(url)
  .then(res => {
    console.log(res)
    return ajax(url1)
  }).then(res => {
    console.log(res)
    return ajax(url2)
  }).then(res => console.log(res))

async 及 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

常用定时器函数

setTimeout、setInterval、requestAnimationFrame