javascript - 当一个流依赖于另一个流的值时该怎么办？

Question

我是 Rx.js 新手，正在寻找有关 FRP 概念的一些基本帮助。我有一个使用 generateWithRelativeTime 保持游戏循环运行的流，以及一个跟踪屏幕分辨率的流。我当前代码的问题是我的游戏循环仅在屏幕分辨率更改时运行。

我的模型函数生成的流需要 res$ 中的最新值。

function model(res$) {
  return res$.map(res => {
    const rows = ceil(res[1] / CELL.HEIGHT)+1
    const cols = ceil(res[0] / CELL.WIDTH)+1

    return Observable.generateWithRelativeTime(
      initWorld(rows, cols, 1.618),
      noOp,
      world => step(world),
      noOp,
      _ => 100,
      Rx.Scheduler.requestAnimationFrame
    ).timeInterval()
  });
}

function intent() {
  return Observable.fromEvent(window, 'resize')
                   .map(e => [e.currentTarget.innerWidth, e.currentTarget.innerHeight])
                   .debounce(100, Rx.Scheduler.requestAnimationFrame)
                   .startWith([window.innerWidth, window.innerHeight])
}

model(intent())

Answer 1

欢迎来到 FRP 的乐趣。事实上，很难理解你的问题。 当一个流依赖于另一个流的值时该怎么办？ 如何连接到 我当前代码的问题是我的游戏循环仅在屏幕分辨率更改时运行。 ？你给出实际的行为，你期望的行为是什么？

由于我对问题的理解有限，我认为您需要将这一行 return res$.map(res => { 替换为 return res$.flatMapLatest(res => {，即使用运算符 flatMapLatest 而不是 map 运算符。

要了解 flatMap 运算符，我建议您查看以下资源:The introduction to reactive programming you've been missing ，illustrated marbles和 official documentation .

PS:我发现您似乎遵循模型- View -意图架构。出于好奇，您正在尝试使用 cyclejs 吗？