等待上一個動作執行

Question

假設我們有兩個按鈕。 第一個按鈕以1000ms的延遲執行操作，而另一個按鈕以2000ms的延遲執行操作。 單擊一個按鈕時，我要等待其執行，只有在此之后，才允許其他按鈕執行操作。

例如，單擊按鈕2，然后單擊按鈕1，只能導致執行按鈕2的動作（基本上，按鈕1的動作將被忽略，因為尚未執行動作2）。 如何使用rxjs庫實現？

const btnOne = document.querySelector('#btn1');
const obs1 = rxjs.fromEvent(btnOne, 'click').pipe(
    rxjs.operators.delay(1000)
);

const btnTwo = document.querySelector('#btn2');
const obs2 = rxjs.fromEvent(btnTwo, 'click').pipe(
    rxjs.operators.delay(2000)
);

const generalObs = rxjs.merge(obs1, obs2).pipe(
    rxjs.operators.take(1),
    rxjs.operators.repeat()
);

generalObs.subscribe(result => console.log(result.target));

Answer 1

檢查一下這個堆棧閃電：它演示了如何使用exhaustMap運算符實現您描述的行為。

https://stackblitz.com/edit/angular-a6spvp

不同的地圖運算符是最重要且最常用的運算符。 查看下面的文章，以更好地說明您可以使用exhaustMap ， switchMap ， concatMap或mergeMap 。

https://blog.angular-university.io/rxjs-higher-order-mapping/

閱讀完本文后：使用我發布的stackblitz並將haustMap替換為switchMap ， concatMap或mergeMap ，看看它如何影響行為；）