时间戳

首页 > 解决方案 > 我怎样才能用 Ionic 做一个计时器？

angular - 我怎样才能用 Ionic 做一个计时器？

问题描述

我正在尝试在我的 Ionic 应用程序中做一种计时器，它应该在我加载页面时启动，并且它应该每秒向先前初始化为 0 的变量添加一个值。我写了这个，但它不起作用：

  ngOnInit() {
 this.counter();
}


counter(){
  while(this.value!=1){
    timer(1000).subscribe(x => {this.value=this.value+0.075 })
  }
}

timer 是从 'rxjs' 导入的方法。

在此期间必须更改的 HTML 片段是：

<ion-progress-bar value={{value}} buffer={{buffer}}></ion-progress-bar>

变量在这里定义：

    private value_: number=0;
    private buffer_: number=this.value;

最后我想说我已经创建了 set 和 get 方法。

标签： angulartypescriptionic-frameworkweb-applications

解决方案

  1. 您实际上并不需要控制器中的订阅。您可以async在模板中使用管道。
  2. 您可以立即启动计时器，并将初始延迟设置为零：timer(0, 1000).
  3. 而不是while你可以使用takeWhile运算符来完成 observable。

控制器

import { timer, Subject } from 'rxjs';
import { map, takeUntil, takeWhile } from 'rxjs/operators';

private stop$ = new Subject<any>();

private value_: number = 0;
private buffer_: number = this.value;

timer$ = timer(0, 1000).pipe(
  takeUntil(this.stop$),               // stop when `stop$` emits
  takeWhile(_ => this.value_ < 1),     // are you sure `this.value_ == 1` is right?
  finalize(() => this.someMethod()),   // run this method when observable completes
  map(_ => {
    this.value_ = this.value_ + 0.075;
    return this.value_;
  }
);

模板

// is buffer always set to zero?
<ion-progress-bar [value]="timer$ | async" [buffer]="buffer"></ion-progress-bar>

更新

  1. 当 observable 完成时，使用finalizeoperator 做某事。
  2. 使用takeUntil运算符随时停止可观察流。在这种情况下，我使用了一个Subject名为stop$. 当你想停止流时，像this.stop$.next().
  3. 如果您finalize只想使用运行takeWhile，则将takeUntil操作符移到下方finalize。当someMethod()您明确停止流时，不会触发。

推荐阅读