当其他人在 RxJs 中开火时推迟观察

Question

我在一个页面上有一个 table 和两个订阅：

第一个重新加载 table 数据。它有延迟，因为它调用 api.
第二个亮点数据。不影响 table 数据。

当订阅一个接一个触发时，一切正常，但当它们同时触发时，数据会突出显示，并且很快就会重新加载，因此突出显示消失了。

可以看到here.

如果正在加载，有没有办法推迟突出显示？

也许我可以通过引入 loading 变量来实现这一点，但我正在寻找 reactiveX 解决方案。

提前致谢。

Answer 1

请记住，在 rxjs 中，一切都是流，您可以利用它，我对您进行了一些修改 fiddle 现在一切都是流：

  var pageClicks = Rx.Observable.fromEvent(document.getElementById('page'),  'click');
  var highlightClicks = Rx.Observable.fromEvent(document.getElementById('highlight'), 'click');
  var bothClicks = Rx.Observable.fromEvent(document.getElementById('both'), 'click');

  var page = 0;
  var nextPage$ = Rx.Observable.of(page)
    .map(function() {
      page = (page + 1) % 2;
      return page
    })
    .switchMap(loadData)
    .do(renderData);

  var doBoth$ = nextPage$
    .do(highlight);

  // initial rendering of data
  doBoth$.subscribe();

  pageClicks
    .switchMapTo(nextPage$)
    .subscribe();

  highlightClicks
    .do(highlight)
    .subscribe();

  bothClicks
    .switchMapTo(doBoth$)
    .subscribe();

这是 link 到更新后的 fiddle：https://fiddle.jshell.net/r2L7k0mc/3/

根据您的评论，我已使用以下代码更新了您的 fiddle：

  var page$ = events.page$.share();
  var loadData$ = page$
    .startWith(0)
    .switchMap(page => loadData(page).takeUntil(page$))
    .do(renderData);
  loadData$.subscribe();

  var loading$ = Rx.Observable.merge(
    page$.mapTo(true),
    loadData$.mapTo(false)
  )
    .startWith(false)
    .publishReplay(1);
  loading$.connect();

  events.highlight$
    .switchMap(function() {
        return loading$
        .filter(function(isLoading) { return !isLoading; })
        .take(1);
    })
    .do(highlight)
    .subscribe();

参见：https://fiddle.jshell.net/mc8h52r7/5/

但是我强烈建议重新考虑架构，因为这是一组非常丑陋的流，肯定可以使用不同的架构进行优化。

当其他人在 RxJs 中开火时推迟观察

Postpone observable when other one fired in RxJs

reactivex

rxjs5