触发方法的rxjs倒计时

Question

我正在尝试进行 5 分钟倒计时以触发服务方法并重新加载 5 分钟倒计时（基本上我正在尝试每 5 分钟重新加载一些数据）

  constructor(
    private reloadDataService: ReloadDataService,
    private userService: UserService
    ) {
      this.timer$ = timer(0, 1000).pipe(
        scan(acc => --acc, 300),
        takeWhile(x => x >= 0),
      );
    }

realod 方法由按钮触发或每 5 分钟触发一次

  reload() {
    this.lastRefresh = new Date();
    this.reloadDataService.reload()
  }

  ngOnInit() {
    this.getUserDetails();
  }

我试过

this.timer$ = timer(0, 1000).pipe(
            switchMap(() => this.reload()),
            scan(acc => --acc, 300),
            takeWhile(x => x >= 0),
          );

但没有用 - 如何每 5 分钟触发一次重新加载方法？

Answer 1

使用定时器的订阅属性，

const source = timer(0, 300000);
source.subscribe((_) => this.reload());

Answer 2

试试下面的代码。它将设置间隔方法，当订阅 refreshInterval$ 时，您可以调用 reload 方法或您想要重复的任何操作。

const refreshInterval$: Observable<any> = timer(0, 300000)
  .pipe(
    // Boolean to kill the request if the user closes the component 
    takeWhile(() => this.killTrigger));
refreshInterval$.subscribe(() => {
    // Your code here 
});

Answer 3

一种方法是使用 rxjs 提供的间隔或定时器功能。

这是我创建的示例。

countDown: Subscription = null;
minutes: number = 5;
counter: number = this.minutes * 60;
triggered: number = 0;

启动定时器功能

startTimer(): void {
  this.countDown ? this.stopTimer() : null;
  this.countDown = interval(1000).subscribe(() => {
    --this.counter;
    if (!this.counter) {
      this.trigger();
    }
  });
}

停止定时器功能

stopTimer(): void {
  if (this.countDown) {
    this.countDown.unsubscribe();
    this.countDown = null;
  }
}

倒计时结束时执行的触发函数

trigger(): void {
  this.counter = this.minutes * 60;
  this.stopTimer(); // unsubscribe timer
  this.startTimer(); // re subscribe timer
  this.triggered++;
  // your code
}

codesandbox ui example

希望这对您有所帮助，如果您构建另一个解决方案，请告诉我。

祝福，

Dev.klodian

触发方法的rxjs倒计时

rxjs countdown that triggers method

javascript

timer

rxjs

angular