推遲觀察到另一個時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/

不過我強烈建議重新考慮架構，因爲這是一個非常醜陋的集流，那肯定可以與不同的體系結構進行了優化。