当其他人在 RxJs 中开火时推迟可观察 [英] Postpone observable when other one fired in RxJs

问题描述

我在一个页面上有一个表格和两个订阅:

I have a table on a page and two subscriptions:

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

当订阅一个一个地触发时，一切正常，但是当它们同时触发时，数据会被高亮显示，很快就会重新加载，所以高亮消失了.

When subscriptions fire one by one everything is OK, but when they fire at the same time data is highlighted and soon after is reloaded so highlighting is gone.

您可以在此处查看.

如果正在重新加载，是否有办法推迟突出显示?

Is there are way to postpone highlighting if reloading is in action?

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

Probably I can accomplish this by introducing loading variable but I am looking for reactiveX solution.

提前致谢.

推荐答案

请记住，在 rxjs 中一切都是流，您可以利用它来发挥自己的优势，我对您进行了一些修改，以便一切都是流现在:

Keep in mind that in rxjs everything is a stream, which you can use to your advantage, I've modified you fiddle a bit so that everything is a stream now:

  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();

这是更新的小提琴的链接:https://fiddle.jshell.net/r2L7k0mc/3/

Here is the link to the updated fiddle: https://fiddle.jshell.net/r2L7k0mc/3/

根据您的评论，我用以下代码更新了您的小提琴:

Based on your comments I have updated your fiddle with the following code:

  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/

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

However I would strongly suggest to rethink the architecture, since this is a very ugly set of streams, that could surely be optimized with a different architecture.

这篇关于当其他人在 RxJs 中开火时推迟可观察的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！