JS异步编程

1. 并发和并行的区别

• 并发是宏观概念，我分别有任务 A 和任务 B，在一段时间内通过任务间的切换完成了这两个任务，这种情况就可以称之为并发。

• 并行是微观概念，假设 CPU 中存在两个核心，那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行。

2. 什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？

回调函数例子：

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

但是回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。假设多个请求存在依赖性，你可能就会写出如下代码：

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

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

1. 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
2. 嵌套函数一多，就很难处理错误
3. 不能使用 try catch 捕获错误，不能直接 return

3. Promise 的特点是什么，分别有什么优缺点？什么是 Promise 链？Promise 构造函数执行和 then 函数执行有什么区别？

我所理解的promise 是一个同步函数，但是创建的实例为异步操作（resolve和 reject）返回给调用者

• 等待中（pending）
• 完成了 （resolved）
• 拒绝了（rejected）

这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变

new Promise((resolve, reject) => {
  resolve('success')
  // 无效
  reject('reject')
})

当我们在构造 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 也很好地解决了回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：

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

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

手写一个promise

const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn) {
  const that = this
  that.state = PENDING
  that.value = null
  that.resolvedCallbacks = []
  that.rejectedCallbacks = []
  // 待完善 resolve 和 reject 函数
  // 待完善执行 fn 函数
}

• 首先我们创建了三个常量用于表示状态，对于经常使用的一些值都应该通过常量来管理，便于开发及后期维护
• 在函数体内部首先创建了常量 that，因为代码可能会异步执行，用于获取正确的 this 对象
• 一开始 Promise 的状态应该是 pending
• value 变量用于保存 resolve 或者 reject 中传入的值
• resolvedCallbacks 和 rejectedCallbacks 用于保存 then 中的回调，因为当执行完 Promise 时状态可能还是等待中，这时候应该把 then 中的回调保存起来用于状态改变时使用

一个简单的promise：

    const PENDING = 'pending',
      RESOLVED = 'resloved',
      REJECTED = 'rejected';

    function MyPromise(fn) {
      const _this = this;
      _this.state = PENDING; // 开始的状态是pending
      _this.value = null; // value用于保存resolve或者reject传入的值
      _this.reslovedCallbacks = [];
      _this.rejectedCallbacks = []; // 保存then的回调
      // 以上是最简单版本 没有reslove, rejected, 没有fn函数处理

      function resolve(value) {
        if (_this.state === PENDING) {
          _this.state = RESOLVED;
          _this.value = value;
          _this.reslovedCallbacks.map(item => item(_this.value))
        }
      }

      // '两个函数都要先判断是否为pending状态, 不是则不进行相应的改变, 修改状态, 赋值, 遍历执行队列函数'

      function reject(value) {
        if (_this.state === PENDING) {
          _this.state = REJECTED;
          _this.value = value;
          _this.rejectedCallbacks.map(item => item(_this.value))
        }
      }

      // -----------------------------------以下执行 传入的fn函数-------------------------------

      try {
        fn(resolve, reject) // 传入的函数是在new promise过程执行的
      } catch (e) {
        reject(e) // 如果里面报错, 则直接返回reject
      }
    }



    // ------------------------------------以下为最复杂的 then 函数------------------------------



    MyPromise.prototype.then = function (onFullfilled, onRejected) {
      const _this = this;
      onFullfilled = typeof onFullfilled === 'function' ? onFullfilled : v => v;
      onRejected = typeof onRejected === 'function' ? onRejected : r => { throw r };
      if (_this.state === PENDING) {
        _this.reslovedCallbacks.push(onFullfilled);
        _this.rejectedCallbacks.push(onRejected);
      }

      if (_this.state === RESOLVED) {
        onFullfilled(_this.value)
      }

      if (_this.state === REJECTED) {
        onRejected(_this.value)
      }
    }

    new MyPromise((resolve, reject) => {
      resolve(1);
      reject()
    }).then(value => {
      console.log(value)
    })

4. async 及 await 的特点，它们的优点和缺点分别是什么？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()
}

async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise 来说，优势在于处理 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，其实 await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 generator。如果你熟悉 co 的话，其实自己就可以实现这样的语法糖。

5. setTimeout、setInterval、requestAnimationFrame 各有什么特点？

• setTimeout 是超时调用
• setInterval 是间歇调用
• requestAnimationFrame 循环定时器
  requestAnimationFrame 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题，当然你也可以通过该函数来实现 setTimeout

function setInterval(callback, interval) {
  let timer
  const now = Date.now
  let startTime = now()
  let endTime = startTime
  const loop = () => {
    timer = window.requestAnimationFrame(loop)
    endTime = now()
    if (endTime - startTime >= interval) {
      startTime = endTime = now()
      callback(timer)
    }
  }
  timer = window.requestAnimationFrame(loop)
  return timer
}

let a = 0
setInterval(timer => {
  console.log(1)
  a++
  if (a === 3) cancelAnimationFrame(timer)
}, 1000)