每10秒调用一次函数Angular2

Question

我正在尝试创建一个每10秒Timer调用API call一次,我正在使用,setTimeOut但问题是它变成了一个无限循环,即使我推到另一个页面它仍然加入if条件.

示例:

我在一个方法上调用它来启动10秒API调用

setTimeout(() => {
    this.onTimeOut();
}, 1000);

这就是onTimeOut()方法......

onTimeOut() {
    this.ApiCall().then(
    success => {
    if(success ['ok'] == 0){
        this.navCtrl.push(myPage);
    }
    },
    error => { console.log(error); });
}
setTimeout(() => {
    this.onTimeOut();
}, 1000);
}

我听说过Debounce,rxjs/rs但我不熟悉它们,你能给我一些提示吗？或者,如果这种方式更有效,请继续向我解释为什么它变成循环.

目标是当它加入if并推送页面时,停止计时器.

Answer 1

更好地使用可观察量

this.sub = Observable.interval(10000)
    .subscribe((val) => { console.log('called'); });

停止使用

this.sub.unsubscribe();

确保导入interval与

import 'rxjs/add/observable/interval';

Answer 2

从RxJS 6+ 开始，您只需使用间隔。

import { interval } from 'rxjs';

//in 10 seconds do something
interval(10000).subscribe(x => {
    this.myFunctionThatDoesStuff();
});

您可以Subscription与间隔一起使用。

import { interval, Subscription} from 'rxjs';
export class intervalDemo{
    mySubscription: Subscription

    constructor(){
    this.mySubscription= interval(5000).subscribe((x =>{
                this.doStuff();
            }));
    }
    doStuff(){
        //doing stuff with unsubscribe at end to only run once
        this.failedRequestSub.unsubscribe();
    }
}

Answer 3

在Angular应用程序中比setTimeout更好的解决方案是使用Observable.Observable有一个名为timer的方法,您可以使用这种方式(并且还有一个TimerObservable但我从未使用它,所以我不知道这是否是同一个东西):

timer = Observable.timer(initialDelay, period);

timer.subscribe(tick => {
   // Your API call, which will be performed every period
});

我鼓励你为你的请求使用RxJS和Observable,而不是承诺,它更多地采用Angular方式为我做事,而RxJS是一个非常强大的库.

RxJS Observable doc