Javascript 组合rxjs流，检测更改并返回一个值

后台-Angular+.net核心WebApi，假设我正在构建一个时间管理应用程序来跟踪您在任务上花费的时间->用户在前端创建一个任务并启动它->有一个计时器显示经过的时间

这个想法-经过的时间来自后端。当用户通过服务在前端启动任务时，我会在后端启动计时器，并将经过的时间传递回前端，以便向用户显示。即使后端和前端之间存在连接问题，我也希望显示正确的值

图：我向用户显示的后端流每经过一秒就会发出一个值，但有一个连接故障，6秒后它会冻结片刻，然后发送9 0:09，这可能会让用户感到困惑，过去是6秒，现在是9？？。所以我在前端创建了一个间隔，它每秒都会发出新的值。每秒钟我都想检查后端流是否发送了新值，若并没有，我想获取以前的值并修改它，以便用户获得正确的值

bStream => ---1---2---3---4---5---6---x---x---9
fStream => ---1---2---3---4---5---6---7---8---9

What user sees:
00:01 -> 00:02 -> 00:03 -> 00:04 -> 00:05 -> 00:06 (freeze) -> 00:09

What I want to user to see:
00:01 -> 00:02 -> 00:03 -> 00:04 -> 00:05 -> 00:06 -> (freeze - frontend knows there is no new value so adds 1 second to previous)
So, it should look like that:
00:01 -> 00:02 -> 00:03 -> 00:04 -> 00:05 -> 00:06 -> 00:07 -> 00:08 -> 00:09

我正挣扎着从哪里开始

我很快就摆弄了两条数据流，但我不知道如何找到它。数据流并没有产生新的价值

---

请检查下面的代码。要模拟同步问题，请将代码v*5更改为v*4，然后计数器将在获得该值后尊重来自后端的值

//每5秒发射一次 const source=interval5000.pipe mapv1=>v1+1，//console.logv； 现在它从0到N平稳计数，即使后端有延迟

更新

有更简单的方法，但问题是它不依赖于后端应答的时间，并且有自己的1秒周期

管 bufferTime1000，//b.length？a+1:b[0]，0，//假定或返回。 ;

---

请检查下面的代码。要模拟同步问题，请将代码v*5更改为v*4，然后计数器将在获得该值后尊重来自后端的值

//每5秒发射一次 const source=interval5000.pipe mapv1=>v1+1，//console.logv； 现在它从0到N平稳计数，即使后端有延迟

更新

有更简单的方法，但问题是它不依赖于后端应答的时间，并且有自己的1秒周期

管 bufferTime1000，//b.length？a+1:b[0]，0，//假定或返回。 ; 这里有一种方法：

const be$=concat 1.100， 2.100， of3.100， of4.100， 5.100， of6.100， 为10.500，//冻结后 11.100， 12.100， .pipeshareReplay{bufferSize:1，refCount:true，}，endWithnull； //`skip1`-使用的`ReplaySubject`是`shareReplay`将为我们提供最新的值 //而且这是不需要的 const beReady$=be$.pipeskip1，take1； 常数fe$=be$.pipe mergeMapv=>merge ofv， 真空管 expandv=>timer100.pipemapv1=>1+v， TakeUntilberady$， , 不同的是， filterv=>v！==无效的 .subscribeconsole.log endWithnull-为了在发出最后一个值12时停止递归，我们需要源发出其他内容

shareReplay-源需要共享，因为除了主subscriberfe之外，还有另一个subscriberbeReady$$

mergeMapv=>merge ofv，//传递当前值 真空管 //如果“be$”在接下来的100毫秒内没有发出，则发送“currentValue+1”` //并继续这样做，直到'be$'最终发出 expandv=>timer100.pipemapv1=>1+v， TakeUntilberady$， , expand与使用mergeMap类似，但是：

它将沿着内部值传递 它将基于最后一个内部值创建另一个内部可观察对象；所以，它是递归的 takeUntilbeReady$是如何停止递归的 这里有一种方法：

const be$=concat 1.100， 2.100， of3.100， of4.100， 5.100， of6.100， 为10.500，//冻结后 11.100， 12.100， .pipeshareReplay{bufferSize:1，refCount:true，}，endWithnull； //`skip1`-使用的`ReplaySubject`是`shareReplay`将为我们提供最新的值 //而且这是不需要的 const beReady$=be$.pipeskip1，take1； 常数fe$=be$.pipe mergeMapv=>merge ofv， 真空管 expandv=>timer100.pipemapv1=>1+v， TakeUntilberady$， , 不同的是， filterv=>v！==无效的 .subscribeconsole.log endWithnull-为了在发出最后一个值12时停止递归，我们需要源发出其他内容

shareReplay-源需要共享，因为除了主subscriberfe之外，还有另一个subscriberbeReady$$

mergeMapv=>merge ofv，//传递当前值 真空管 //如果“be$”在接下来的100毫秒内没有发出，则发送“currentValue+1”` //并继续这样做，直到'be$'最终发出 expandv=>timer100.pipemapv1=>1+v， TakeUntilberady$， , 他和我们一样 正在合并地图，但：

它将沿着内部值传递 它将基于最后一个内部值创建另一个内部可观察对象；所以，它是递归的 takeUntilbeReady$是如何停止递归的

---

为什么不在前端上记录经过的时间？为什么不在前端上记录经过的时间？是否应该如此复杂？switchMap和一个小的延迟同样可以更容易地完成这项工作。我认为这是扩展的一个很好的用例。然而，我同意，switchMap可以简化事情。作为一个用例，它是：一个很好的操作符。对不起，这是题外话，不用担心！你是对的，出于某种原因，“swtichMap”没有出现在我的脑海中，它应该如此复杂吗？switchMap和一个小的延迟同样可以更容易地完成这项工作。我认为这是扩展的一个很好的用例。然而，我同意，switchMap可以简化事情。作为一个用例，它是：一个很好的操作符。对不起，这是题外话，不用担心！你是对的，出于某种原因，我没有想到“swtichMap”