JavaScript 中使用 Generator的方法

日期：2020-05-11 栏目：程序人生浏览：次

Generator 是一种非常强力的语法，但它的使用并不广泛（参见下图 twitter 上的调查！）。为什么这样呢？相比于 async/await，它的使用更复杂，调试起来也不太容易（大多数情况又回到了从前），即使我们可以通过非常简单的方式获得类似体验，但是人们一般会更喜欢 async/await。

然而，Generator 允许我们通过 yield 关键字遍历我们自己的代码！这是一种超级强大的语法，实际上，我们可以操纵执行过程！从不太明显的取消操作开始，让我们先从同步操作开始吧。

我为文中提到的功能创建了一个代码仓库 —— github.com/Bloomca/obs…

批处理 (或计划)

执行 Generator 函数会返回一个遍历器对象，那意味着通过它我们可以同步地遍历。为什么我们想这么做？原因有可能是为了实现批处理。想象一下，我们需要下载 1000 个项目，并在表格中逐行的显示它们（不要问我为什么，假设我们不使用框架）。虽然立刻展示它们没有什么不好的，但有时这可能不是最好的解决方案 —— 也许你的 MacBook Pro 可以轻松处理它，但普通人的电脑不能（更别说手机了）。所以，这意味着我们需要用某种方式延迟执行。

请注意，这个例子是关于性能优化，在你遇到这个问题之前，没必要这样做 ——过早优化是万恶之源!

// 最初的同步实现版本
function renderItems(items) {
 for (item of items) {
 renderItem(item);
 }
}
// 函数将由我们的执行器遍历执行
// 实际上，我们可以用相同的同步方式来执行它！
function* renderItems(items) {
 // 我使用 for..of 遍历方法来避免新函数的产生
 for (item of items) {
 yield renderItem(item);
 }
}

没有什么区别是吧？那么，这里的区别在于，现在我们可以在不改变源代码的情况下以不同方式运行这个函数。实际上，正如我之前提到的，没有必要等待，我们可以同步执行它。所以，来调整下我们的代码。在每个 yield 后边加一个 4 ms（JavaScript VM 中的一个心跳）的延迟怎么样？我们有 1000 个项目，渲染将需要 4 秒 —— 还不错，假设我想在 2 秒之内渲染完毕，很容易想到的方法是每次渲染 2 个。突然使用 Promise 的解决方案将变得更加复杂 —— 我们必须要传递另一个参数：每次渲染的项目个数。通过我们的执行器，我们仍然需要传递这个参数，但好处是对我们的 renderItems 方法完全没有影响。

function runWithBatch(chunk, fn, ...args) {
 const gen = fn(...args);
 let num = 0;
 return new Promise((resolve, promiseReject) => {
 callNextStep();
 function callNextStep(res) {
  let result;
  try {
  result = gen.next(res);
  } catch (e) {
  return reject(e);
  }
  next(result);
 }
 function next({ done, value }) {
  if (done) {
  return resolve(value);
  }
  // every chunk we sleep for a tick
  if (num++ % chunk === 0) {
  return sleep(4).then(proceed);
  } else {
  return proceed();
  }
  function proceed() {
  return callNextStep(value);
  }
 }
 });
}
// 第一个参数 —— 每批处理多少个项目
const items = [...];
batchRunner(2, function*() {
 for (item of items) {
 yield renderItem(item);
 }
});

转载注明出处：http://www.heiqu.com/453.html

JavaScript 中使用 Generator的方法

相关推荐