如何使rxjs暂停/恢复？

debugcn 发表于 Dev

黑洞

现在有一个数组，该数组的值是图像链接，例如：

const imageList = [
  'https://cdn.pixabay.com/photo/2020/02/16/20/29/new-york-4854718_960_720.jpg',
  'https://cdn.pixabay.com/photo/2020/02/14/16/04/mallorca-4848741_960_720.jpg',
  'https://cdn.pixabay.com/photo/2020/02/14/04/20/old-city-4847469_960_720.jpg',
  // more...
];

我想用来rxjs按顺序下载它们（我是电子应用程序，所以我可以下载它）

第一张图片的下载完成后，再下载第二张图片。当下载第三张图片时，用户单击暂停按钮，然后等待第三张图片的下载完成。然后，不再下载。当用户单击继续按钮时，下载从第四张图片开始。

我指的是这篇文章：https : Buffering (lossless)//medium.com/@kddsky/pauseable-observables-in-rxjs-58ce2b8c7dfd中的部分。本文中的代码是：

merge(
  source$.pipe( bufferToggle(off$, ()=>on$)  ),
  source$.pipe( windowToggle(on$, ()=>off$) )
).pipe(
  // then flatten buffer arrays and window Observables
  flatMap(x => x)
)

演示URL是：https : //thinkrx.io/gist/cef1572743cbf3f46105ec2ba56228cd

但是此代码中有两个问题无法满足我的需求。我不知道如何修改它。

我使用redux-observable，所以我想用两个动作来触发它们：（this.props.start()/ this.props.pause()）
恢复后，数据仍是一一传输，而不是一次发布

当前代码如下：

export const epicDownloadResources = (
  action$: ActionsObservable<AnyAction>,
  store$: StateObservable<RootState>,
) => {
  return action$.pipe(
    ofType(appActions.other.start()),
    of([
      'https://cdn.pixabay.com/photo/2020/02/16/20/29/new-york-4854718_960_720.jpg',
      'https://cdn.pixabay.com/photo/2020/02/14/16/04/mallorca-4848741_960_720.jpg',
      'https://cdn.pixabay.com/photo/2020/02/14/04/20/old-city-4847469_960_720.jpg',
    ]),
    mergeMap(() => {
      // code
    }),
    mergeMap((url: string) => {
      // downloading
    })
}

在实际产品中，它将下载公司的内部图片资源，而不是其他非版权图片。

博恩

我采取了完全不同的方法。

如果我理解正确，那么您要在用户恢复后按顺序继续。实际上，这意味着进行窗口或缓冲是没有意义的。

我认为，只需简单地使用concatMap嵌套即可。

const pause$ = fromEvent(pauseButton, "click").pipe(
 mapTo(false),
);

const resume$ = fromEvent(resumeButton, "click").pipe(
 mapTo(true),
);

const pauseResume$ = merge(pause$,resume$).pipe(
 startWith(true),
 shareReplay(1),
)

const source = of(...imageList).pipe(
 concatMap((url, i) =>
   pauseResume$.pipe(
     tap(v => console.log(`should resume ${v}`)),
     filter(v => v), // Only resume if true
     take(1),
     concatMap(() =>
       from(fetch(url)).pipe(
         delay(1000), // Simulate slow request
         mapTo(i) // just for logging which request we just completed
       )
     )
   )
 )
);
source.subscribe(x => console.log(x));

这将暂停启动新请求，直到resume $发出新值为止。我相信这是根据您的情况想要的。

我不确定您是否希望用户暂停时在您的场景中完成第三个请求。我假设您这样做，但是如果没有，您可以在请求之后使用另一个concatMap来使用过滤器pauseResume $。

突击

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。