Question

我正在尝试创建一个延迟加载指示符的效果，这样每次我从API检索数据时它都不会闪烁或闪烁。这可能是一个不知道要搜索什么的情况，因为我确信我不能成为唯一一个想要在将这样的指示器放到屏幕上之前给出300-500毫秒的响应的人。

  @Effect() startDelayTimer: Observable<Action> = this.actions$
    .ofType(uiActions.START_LOADING_DELAY_TIMER)
    .switchMap(action => Observable
      .timer(300)
      .mapTo(new uiActions.LoadingDelayTimerCompleteAction));

有没有什么可以破坏这种效果的完成？我正在将所有操作/状态对记录到控制台，并且正在调用START_LOADING_DELAY_TIMER，但完成时间永远不会。

修改

这个问题提前被问到，因为我遇到的问题最终变得无关紧要了。以下是其他人发现此问题的最终实施：

@Effect() startDelayTimer: Observable<Action> = this.actions$
    .ofType(uiActions.START_LOADING_DELAY_TIMER)
    .switchMap(action => Observable
      .timer(5000)
      .takeUntil(this.actions$.ofType(uiActions.CANCEL_LOADING_DELAY_TIMER))
      .mapTo(new uiActions.LoadingDelayTimerCompleteAction)
  )

启动计时器以延迟加载指示灯闪烁
如果调度CancelLoadingDelayTimerAction（可能是从API完成数据检索），请停止计时器并不显示加载指示符。
如果计时器在调度CancelLoadingDelayTimerAction之前完成，则显示加载指示符。

Answer 1

而不是.timer(300)，请使用.delay(300)。这应该可以解决你的问题。

计时器会在给定的时间间隔内发出数字，这可能会导致您的效果产生一些奇怪的行为。延迟只会在一段时间内限制流量，我认为这就是你所要求的。

使用@ ngrx / effects创建加载指示符延迟

1 个答案: