Rxjs中switchMap→concatMap→toArray未完成及第二个switchMap修复问询

首先得给你点破核心问题：你用的switchMap特性就是当源Observable发射新值时，会立刻掐断之前还在运行的内部Observable。所以第二个switchMap处理前序元素恢复动画时，只要新的滑块值持续发射，之前的恢复动画还没跑完就被终止了，自然看不到完整的执行过程（也就是你说的“无法查看全部消息”）。

接下来根据你的需求，给你两种针对性的修复方案：

方案1：如果要求前序恢复动画必须完成后再处理新值（串行执行） #

把第二个switchMap换成concatMap就行。concatMap会像排队一样，等前一个内部Observable完全执行完，才会处理下一个新值触发的操作，完美解决旧动画被打断的问题。

示例代码大概是这样：

source$.pipe(
  // 拆分前序元素和当前元素
  map(index => ({
    previous: yourArray.slice(0, index),
    current: yourArray[index]
  })),
  // 第一个switchMap保留，因为当前元素的动画只需要最新的，旧的可以取消
  switchMap(({ current }) => animateCurrentElement(current)),
  // 把这里的switchMap换成concatMap，保证前序恢复动画跑完再处理下一次
  concatMap(() => restorePreviousElements())
).subscribe();

方案2：如果允许前序恢复和当前动画并行执行（不打断旧动画） #

这种情况换成mergeMap就好。mergeMap会同时运行多个内部Observable，不会因为新值进来就掐断之前的，所有的恢复动画都会完整执行完毕。

示例代码：

source$.pipe(
  map(index => ({
    previous: yourArray.slice(0, index),
    current: yourArray[index]
  })),
  switchMap(({ current }) => animateCurrentElement(current)),
  // 替换成mergeMap，允许并行执行所有恢复动画
  mergeMap(() => restorePreviousElements())
).subscribe();

进阶优化：分离当前动画和前序恢复的流 #

如果希望当前动画始终优先（新值进来立刻取消旧的当前动画），但前序恢复必须全部完成，可以把两个逻辑拆成独立的流再合并，这样互不干扰：

import { merge } from 'rxjs';
import { switchMap, mergeMap, map } from 'rxjs/operators';

// 源流：滑块的位置变化
const position$ = ...;

// 当前元素动画流：用switchMap保证只处理最新的
const currentAnimation$ = position$.pipe(
  map(index => yourArray[index]),
  switchMap(current => animateCurrentElement(current))
);

// 前序元素恢复流：用mergeMap保证所有恢复动画都执行完
const previousRestore$ = position$.pipe(
  map(index => yourArray.slice(0, index)),
  mergeMap(previous => restorePreviousElements(previous))
);

// 合并两个流，同时处理
merge(currentAnimation$, previousRestore$).subscribe();

最后给你个学习小tip：记住这三个操作符的核心差异就不会踩坑了：

• switchMap：喜新厌旧，弃旧留新
• mergeMap：来者不拒，并行处理
• concatMap：按部就班，排队执行

内容的提问来源于stack exchange，提问作者Kazurus