关于异步:JavaScript-异步编程

残缺高频题库仓库地址：https://github.com/hzfe/awesome-interview

残缺高频题库浏览地址：https://febook.hzfe.org/

相干问题

• JavaScript 异步编程计划有哪些
• JavaScript 异步编程计划各有什么优缺点

答复关键点

阻塞 事件循环 回调函数

JavaScript 是一种同步的、阻塞的、单线程的语言，一次只能执行一个工作。但浏览器定义了非同步的 Web APIs，将回调函数插入到事件循环，实现异步工作的非阻塞执行。常见的异步计划有异步回调、定时器、公布 / 订阅模式、Promise、生成器 Generator、async/await 以及 Web Worker。

知识点深刻

1. 异步回调

异步回调函数作为参数传递给在后盾执行的其余函数。当后盾运行的代码完结，就调用回调函数，告诉工作曾经实现。具体示例如下：

// 第一个参数是监听的事件类型，第二个就是事件产生时调用的回调函数。btn.addEventListener("click", () => {console.log("You clicked me!");

  const pElem = document.createElement("p");
  pElem.textContent = "hello, hzfe.";
  document.body.appendChild(pElem);
});

异步回调是编写和解决 JavaScript 异步逻辑的最罕用形式，也是最根底的异步模式。然而随着 JavaScript 的倒退，异步回调的问题也不容忽视：

1. 回调表白异步流程的形式是非线性的，非程序的，了解老本较高。
2. 回调会受到管制反转的影响。因为回调的控制权在第三方（如 Ajax），由第三方来调用回调函数，无奈确定调用是否合乎预期。
3. 多层嵌套回调会产生回调天堂（callback hell）。

2. 定时器：setTimeout/setInterval/requestAnimationFrame

这三个都能够用异步形式运行代码。次要特色如下：

1. setTimeout：通过任意工夫后运行函数，递归 setTimeout 在 JavaScript 线程不阻塞情的况下可保障执行距离雷同。
2. setInterval：容许反复执行一个函数，并设置工夫距离，不能保障执行距离雷同。
3. requestAnimationFrame：以 以后浏览器 / 零碎的最佳帧速率 反复且高效地运行函数的办法。个别用于解决动画成果。

setInterval 会按设定的工夫距离固定调用，其中 setInterval 外面的代码的执行工夫也蕴含在内，所以 理论距离小于设定的工夫距离。而递归 setTimeout 是调用时才开始算工夫，能够保障屡次递归调用时的距离雷同。

如果以后 JavaScript 线程 阻塞 ，轮到的 setInterval 无奈执行，那么本次工作就会 被抛弃 。而 setTimeout 被阻塞后不会 被抛弃，等到闲暇时会继续执行，但无奈保障执行距离。

3. 公布 / 订阅模式（publish-subscribe pattern）

公布 / 订阅模式是一种对象间一对多的依赖关系，当一个对象的状态产生扭转时，所有依赖于它的对象都将失去状态扭转的告诉。

下面异步回调的例子也是一个公布 / 订阅模式（publish-subscribe pattern）的实现。订阅 btn 的 click 事件，当 btn 被点击时向订阅者发送这个音讯，执行对应的操作。

class PubSub {constructor() {
    // 存储所有订阅的事件类型及对应的订阅函数数组
    // key <eventType>: value <subscribeList>[]
    this.handlers = {};}
  // 订阅事件办法
  on(eventType, handler) {if (!(eventType in this.handlers)) this.handlers[eventType] = [];
    this.handlers[eventType].push(handler);
  }
  // 音讯公布办法
  emit(eventType, ...handlerArgs) {this.handlers[eventType].forEach((v) => {v(...handlerArgs);
    });
  }
  // 勾销订阅
  remove(eventType, handler) {
    // 没有传入具体的事件处理函数，则移除该事件类型的所有订阅函数
    // 有则在订阅数组中移除对应的函数
    if (!handler) {this.handlers[eventType].length = 0;
    } else {const key = this.handlers[eventType].findIndex((v) => v === handler);
      if (key !== -1) this.handlers[eventType].splice(key, 1);
    }
  }
}

const test1 = new PubSub();
const fn1 = (...data) => console.log(data);
test1.on("event1", fn1);
test1.on("event1", (...data) => console.log(`fn2: ${data}`));
test1.emit("event1", "hzfe1", "hzfe2", "hzfe3");
test1.remove("event1", fn1);
// ["hzfe1", "hzfe2", "hzfe3"] fn1 打印
// fn2: hzfe1,hzfe2,hzfe3

公布 / 订阅模式能够更粗疏地理解到有多少种事件类型以及每种类型对应的订阅事件，不便进一步的监听与管制。

4. Promise

Promise 提供了实现和回绝两个状态来标识异步操作后果，通过 then 和 catch 能够别离对着两个状态进行跟踪解决。和事件监听的次要差异在于：

1. 一个 Promise 只能胜利或失败一次，一旦状态扭转，就无奈从胜利切换到失败，反之亦然。
2. 如果 Promise 胜利或失败，那么即便在事件产生之后增加胜利 / 失败回调，也将调用正确的回调。

Promise 应用程序的形式来表白异步，将回调的控制权转交给了能够信赖的 Promise.resolve()，同时也可能应用链式流的形式防止回调天堂的产生，解决了异步回调的问题。但 Promise 也有缺点：

1. 程序错误处理：如果不设置回调函数，Promise 链中的谬误很容易被疏忽。
2. 单决定：Promise 只能被决定一次（实现或回绝），不能很好地反对屡次触发的事件及数据流（反对的规范正在制订中）。
3. 无奈获取状态：处于 Pending 状态时，无奈得悉目前停顿到哪一个阶段（刚刚开始还是行将实现）。
4. 无奈勾销：一旦创立了 Promise 并注册了实现 / 回绝函数，不能取消执行。

5. 生成器 Generator

Generator 函数是 ES6 提供的一种异步编程解决方案，语法与传统函数齐全不同，最大的特点就是能够管制函数的执行。简略示例如下：

function* helloHzfeGenerator() {
  yield "hello";
  yield "hzfe";
  return "ending";
}

var hello = helloHzfeGenerator();

hello.next();
// {value: 'hello', done: false}

hello.next();
// {value: 'hzfe', done: false}

hello.next();
// {value: 'ending', done: true}

hello.next();
// {value: undefined, done: true}

生成器 Generator 并不像一般函数那样总是运行到完结，能够在运行当中通过 yield 来暂停并齐全放弃其状态，再通过 next 复原运行。yield/next 不只是管制机制，也是一种双向消息传递机制。yield 表达式实质上是暂停下来期待某个值，next 调用会向被暂停的 yield 表达式传回一个值（或者是隐式的 undefined）。

生成器 Generator 放弃了程序、同步、阻塞的代码模式，同样解决了异步回调的问题。

6. async/await

async/await 属于 ECMAScript 2017 JavaScript 版的一部分，使异步代码更易于编写和浏览。通过应用它们，异步代码看起来更像是同步代码。具备如下特点：

1. async/await 不能用于一般的回调函数。
2. async/await 与 Promise 一样，是非阻塞的。
3. async/await 使得异步代码看起来像同步代码。

async/await 也存在问题：await 关键字会阻塞其后的代码，直到 Promise 实现，就像执行同步操作一样。它能够容许其余工作在此期间持续运行，但本人的代码会被阻塞。解决方案是将 Promise 对象存储在变量中来同时开始，而后期待它们全副执行结束。具体参照 fast async await。如果外部的 await 期待的异步工作之间没有依赖关系，且须要获取这些异步操作的后果，能够应用 Promise.allSettled() 同时执行这些工作并取得后果。

7. Web Worker

Web Worker 为 JavaScript 发明了多线程环境，容许主线程创立 Worker 线程，将一些任务分配给 Worker 线程运行，解决完后能够通过 postMessage 将后果传递给主线程。长处在于能够在一个独自的线程中执行费时的解决工作，从而容许主线程中的工作（通常是 UI）运行不被阻塞 / 加快。

应用 Web Worker 时有以下三点须要留神的中央：

1. 在 Worker 外部无法访问主线程的任何资源，包含全局变量，页面的 DOM 或者其余资源，因为这是一个齐全独立的线程。
2. Worker 和主线程间的数据传递通过音讯机制进行。应用 postMessage 办法发送音讯；应用 onmessage 事件处理函数来响应音讯。
3. Worker 能够创立新的 Worker，新的 Worker 和父页面同源。Worker 在应用 XMLHttpRequest 进行网络 I/O 时，XMLHttpRequest 的 responseXML 和 channel 属性会返回 null。

Web Worker 次要利用场景：

1. 解决密集型数学计算
2. 大数据集排序
3. 数据处理（压缩，音频剖析，图像处理等）
4. 高流量网络通信

参考资料

1. 异步 JavaScript
2. 应用 Web Worker