时间戳

首页 > 解决方案 > 在 RxJS 或 Redux Observable 中 debounceTime 也起到延迟的作用

reactjs - 在 RxJS 或 Redux Observable 中 debounceTime 也起到延迟的作用

问题描述

在用户单击时，我希望徽章显示 3 秒（即徽章应在 3 秒后自动隐藏）。我也只想要一个 SHOW_BADGE 操作来注册，直到徽章隐藏。我认为 debounceTime 对此有好处，但是，当我多次单击时，直到隐藏的时间变得不一致。

debounceTime 会延长延迟吗？debounceTime 本身是延迟吗？我将如何修复下面的示例以获得我想要的？

export const badgeEpic = action$ =>
  action$.ofType('SHOW_BADGE')
   .pipe(
      debounceTime(3000),
      delay(3000),
      mapTo({ type: 'HIDE_BADGE' })
    );

正如下面评论中的某人所建议的，auditTime 解决了这个特定问题。这是徽章史诗的最终代码。

export const badgeEpic = action$ =>
  action$.pipe(
    ofType('SHOW_BADGE'),
    auditTime(3000),
    mapTo({ type: 'HIDE_BADGE' })
  );

标签： reactjsreduxrxjsredux-observable

解决方案

如果这就是您要做的事情，那么您可以在每次SHOW_BADGE延迟超时之前执行此操作，之前的史诗会自行取消。这种方式HIDE_BADGE总是会在最后一次点击后 3 秒被调用：

export const badgeEpic = action$ =>
  actions$.pipe(
    ofType('SHOW_BADGE'),
    switchMap(() =>
      of(({ type: 'HIDE_BADGE' })).pipe(
        delay(3000),
        takeUntil(action$.ofType('SHOW_BADGE')),
      )),
  )

正如@Yoshi 所指出的，takeUntil可能没有必要switchMap取消之前运行的内部可观察对象。

推荐阅读