推迟观察到另一个时RxJs

Question

解雇我有一个页面，两个订阅桌子上：

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

当订阅逐一触发时，一切都可以，但是当它们在同一时间触发数据时会突出显示，并且很快在重新加载后突出显示消失。

你可以看到它here。

是否有办法推迟突出显示如果重新加载是在行动？

也许我可以通过引入loading变量来完成此操作，但我正在寻找reactiveX解决方案。

在此先感谢。

Answer 1

请记住，在rxjs一切都是甲流，你可以使用你的优势，我已经修改了你捣鼓一下，让一切现在是一个流：

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/

---

根据您的意见我已经更新用下面的代码你的提琴：

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/

不过我强烈建议重新考虑架构，因为这是一个非常丑陋的集流，那肯定可以与不同的体系结构进行了优化。