【问题标题】:Combine two RxJS streams (based on synchrony)合并两个 RxJS 流(基于同步)
【发布时间】:2016-09-01 22:37:18
【问题描述】:

我有两个 RxJS 主题,比如 ab,我需要以某种方式组合。

someComboOfAandB.subscribe({aVal, bVal} => console.log("value:", aVal, bVal));

我想将它们组合起来,如果ab 同步更新,则值会一起传递:

a.next(1);
// some code
b.next(2)

// at end of synchronous code / frame:
// value: 1 2

但是,如果只更新一个值,则仍会同时推送一个更新,同时推送具有两个新值的更新:

a.next(5)

// at end of synchronous code / frame:
// value: 5 2

这可能吗?如果是,那又如何?即使有可能,也应该避免吗?

【问题讨论】:

  • @LukaJacobowitz 问题是在上面的第一个示例中会触发两次更新,而我不能这样做。
  • withLatestFrom 怎么样?只有在其中一个流发出时才会发出。
  • 或者你正在寻找的可能是combineLatest(...).debounceTime(...)
  • debounceTime 很有趣,但我不确定我能知道什么样的准时保证。例如,如果a.nextb.next 之间的代码需要1ms 怎么办? 12毫秒?等等。也许debouncerequestAnimationFrame 以某种方式配对?

标签: javascript reactive-programming rxjs


【解决方案1】:

您应该能够使用Scheduler 来实现您想要的行为:

import "rxjs/add/observable/combineLatest";
import "rxjs/add/operator/map";

import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";
import { asap } from "rxjs/scheduler/asap";

let a = new BehaviorSubject(1);
let b = new BehaviorSubject(2);
let combined = Observable
    .combineLatest(a, b, asap)
    .map((values) => ({ aVal: values[0], bVal: values[1] }));

combined.subscribe(
    ({ aVal, bVal }) => { console.log("value:", aVal, bVal); }
);

a.next(3);
b.next(4);

上面的代码会输出如下:

value: 3 4

如果未指定asap Scheduler,则输出为:

value: 1 2
value: 3 2
value: 3 4

RxJS GitHub 存储库包含一些 Scheduler documentation

【讨论】:

  • 根据文档,asap“微任务队列上的调度,它使用可用的最快传输机制,或者...... Web Worker MessageChannel 或 setTimeout 或其他。”这听起来很有希望,我明天试试
  • 在我的代码中尝试过,有趣的是asap 没有用,但async 可以。我想我不清楚两者在浏览器上下文中的区别
  • 嗯,这令人沮丧 - 有时它似乎有效,有时却无效。我在我的代码库中有一个位置,基本上是这样的:log("start"); a.next(1); log("mid"); b.next(2);,我得到了"start", "subscription update", "mid",订阅者与a.next同步更新。在调用 b.next 之前。其他时候它可以工作:/
  • 你使用的是哪个 RxJS 版本? This PR 在 5.0.0-beta.11 中被合并:“AsapScheduler 和 AnimationFrameScheduler 完全被破坏了”
  • 你说得对——使用的是5.0.0-beta.6。感谢您提供有关版本的高质量答案和见解!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-06-11
  • 1970-01-01
  • 2020-07-13
  • 1970-01-01
  • 1970-01-01
  • 2013-03-28
相关资源
最近更新 更多