将前 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));

方法 2

使用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));

方法 3

否则，您只需使用 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));

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

Delay first 3 items by 1 second and the fourth by 4 seconds

rxjs

rxjs6