减慢 Javascript 减少循环答案

【问题标题】：Slow down a Javascript reduce loop减慢 Javascript 减少循环
【发布时间】：2021-04-23 17:54:01
【问题描述】：

我想减慢 Javascript reduce 循环的速度，以便能够直观地模拟其效果。这是在可观察的笔记本link 中完成的。

我看过这个例子，但是在 Observable 笔记本中遇到了异步问题。 https://flaviocopes.com/how-to-slow-loop-javascript/

我也考虑过为每次迭代使用 setInterval，但与 reduce 一起使用没有意义。

【问题讨论】：

您必须编写自己的reduce 实现。您可以将其实现为 generator 以便您可以控制每次迭代的执行。
出于实际目的，reduce 仍然可以使用，但不是立即应用效果，而是应该将可视化效果组合成一个，因此运行后可以以适当的节奏重新运行可视化.您可能需要展示您想要可视化的内容和方式。但是，绝对有可能有一个 reducer 函数，它采用两种效果并产生一个新的效果，两者之间都有暂停。

标签： javascript ecmascript-6 foreach reduce

【解决方案1】：

您可以使用setInterval-generator 来减慢循环速度，但reduce 与它不兼容（您不能在其中使用yield）。

但是，您可以轻松地将 reduce 重写为 for..of 循环：

const iterator = (function* () {
  const array = [1, 3, 5, 7]
  
  let acc = 0
  for (const elem of array) {
    console.log('Adding %f to %f', elem, acc)
    yield //Wait here
    acc += elem
  }
  
  console.log('Finished, result: %f', acc)
  clearInterval(interval) //Don't forget to clear the interval! Use a try..finally here if your code may throw!
})()

const interval = setInterval(() => iterator.next(), 1000)

【讨论】：

这很聪明。我个人会尝试使生成器更通用。可能是something like this。然而，这是一个我从未想过的非常酷的生成器应用程序——限制间隔。这是在setTimeout 中有条件地执行setTimeout 或必须在setInterval 中执行有条件取消的一个不错的选择。它很好地封装了其他地方的逻辑，您不需要过于复杂的setInterval/setTimeout 回调。