rxjs - 将前 3 个项目延迟 1 秒，第四个项目延迟 4 秒

Question

我试图显示前 3 个数字，每个数字延迟 1 秒，第四个数字延迟 4 秒。不幸的是，我的代码以 1 秒显示四个数字

import { from, of, race, timer, interval } from 'rxjs';
import { groupBy, mergeMap, toArray, map,merge, reduce, concatMap, delay, concat, timeout, catchError, take } from 'rxjs/operators';

const obs$ = from([1,2,3]).pipe(concatMap(a => of(a).pipe(delay(1000)))); 
const obs2$ = of(4).pipe(delay(4000)); 
const result$ = obs$.pipe(merge(obs2$));

const subscribe = result$.subscribe(val => console.log(val));  

显示1234|

代替123----4|

这道题完全是为初学者学习rxjs而写的，已经在https://stackblitz.com上测试过了。

Answer 1

方法一

merge 运算符同时订阅了两个可观察对象(obs$ 和obs2$)。因此，您从代码中获得的结果可能解释如下:

obs$     -----1-----2-----3
obs2$    -----------------------4
result$  -----1-----2-----3-----4

您可以通过将第二个参数设置为 1(默认情况下为 Number.POSITIVE_INFINITY)强制 merge 一次只订阅一个可观察对象来实现您的目标，例如以下内容:

    const obs$ = from([1,2,3]).pipe(concatMap(a => of(a).pipe(delay(1000)))); 
    const obs2$ = of(4).pipe(delay(4000));
    // Provide the concurrency (second) argument as 1 
    const result$ = obs$.pipe(merge(obs2$, 1));

const subscribe = result$.subscribe(val => console.log(val)); 

方法二

使用concat代替merge:

 const obs$ = from([1, 2, 3]).pipe(concatMap(a => of(a).pipe(delay(1000))));
    const obs2$ = of(4).pipe(delay(4000));
    const result$ = concat(obs$, obs2$);

    const subscribe = result$.subscribe(val => console.log(val));

方法三

否则，您只需使用 concatMap 的第二个参数，即发出的项目的索引(从 0 开始)。

 const obs$ = from([1, 2, 3, 4]);

        const delayed$ = obs$.pipe(
          concatMap((value, index) => {
            if (index <= 2) {
              // Delay the first 3 items by 1 sec
              return of(value).pipe(delay(1000));
            } else {
              // Delay other items (here the 4th item) by 4 sec
              return of(value).pipe(delay(4000));
            }
          })
        );

        delayed$.subscribe(x => console.log(x));