Observable中如何使用forEach和setTimeout返回值（不涉及RxJS）

问题原因说明 #

你的代码无法得到预期返回值和闭包无关，核心问题是setTimeout的异步回调返回值会被JS引擎直接丢弃，无法向外层作用域传递，且forEach本身也不支持处理异步返回结果。

原生JS实现方案 #

方案1：按间隔顺序获取值（适合逐帧更新可视化的场景）

先实现基础的延迟工具函数，再用支持异步等待的for...of遍历：

// 延迟工具函数
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))

const arr = [1,2,3,4,5]

async function run() {
  for (const [index, value] of arr.entries()) {
    await delay(index * 1000)
    // 此处可以直接使用拿到的value，比如更新可视化视图、赋值变量
    console.log(value)
  }
}

run()

方案2：批量获取所有延迟后的返回值

如果需要等所有定时任务执行完成后统一拿到全部结果，可结合Promise.all实现：

const arr = [1,2,3,4,5]

// 把每个元素包装成带延迟的Promise
const delayedTasks = arr.map((value, index) => {
  return new Promise(resolve => {
    setTimeout(() => resolve(value), index * 1000)
  })
})

// 所有任务执行完成后拿到完整结果数组
Promise.all(delayedTasks).then(resultArr => {
  console.log(resultArr) // 输出 [1,2,3,4,5]
})

ObservableHQ专属优化方案

如果你是在Observable笔记本中使用，更推荐用生成器函数实现，笔记本会自动迭代异步生成器，每隔指定时间更新单元格值，适配可视化原型的动态更新需求：

// 定义生成器单元格
function* delayedSequence(arr, interval = 1000) {
  for (const item of arr) {
    yield new Promise(resolve => setTimeout(() => resolve(item), interval))
  }
}

// 调用生成器，该单元格会每隔1秒自动更新为数组的下一个值
currentValue = delayedSequence([1,2,3,4,5])

内容的提问来源于stack exchange，提问作者Soonk