web-dev-qa-db-ja.com

10秒ごとに関数を呼び出すAngular2

私はAPI callを10秒ごとに呼び出すTimerを作成しようとしていますが、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に参加してページをプッシュし、タイマーを停止することです。

angulartypescriptionic-frameworkionic2
18
StuartDTO

オブザーバブルのより良い使用

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

使用を停止するには

this.sub.unsubscribe();

必ずintervalをインポートしてください

import 'rxjs/add/observable/interval';
57
Günter Zöchbauer

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

6
Korbraan

angularの方法で目的にobservable.timerを使用します。

 export class CurrentRunsComponent implements OnInit, OnDestroy {
  private timer;


  ngOnInit() {
    this.timer = Observable.timer(10000);
    this.timer.subscribe((t) => this.onTimeOut());
  }
   onTimeOut() {
    this.ApiCall().then(
    success => {
    if(success ['ok'] == 0){
        this.navCtrl.Push(myPage);
    }
    },
    error => { console.log(error); });
}

   ngOnDestroy(){
    console.log("Destroy timer");

  }
}
2
Rohan Fating

SetTiimeoutには何の問題もありません。コードのバグにすぎません。そこには基本条件がないため、これは実際には無限ループ（基本条件のない再帰関数）です。

つまり、setTimeoutは、停止する場所がわからないため、1秒ごとにonTimeOut（）を呼び出し続けます。他のページに切り替えたときに基本条件を使用して再帰を終了します。

 private flag: boolean;

 ngOnInit() {
        this.flag = true;
 }

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

ngOnDestroyメソッドはフラグをfalseに設定し、再帰関数の最後の呼び出しはifブロック内に入らず、その後実行するものがないため、戻ります（以前の状態）。スタックからクリアします。このプロセスは、スタックがクリアされるまで繰り返されます（スタックの最上位にある以前のバージョンでも同じことが起こり、スタックを1つずつ再帰的にクリアします） 。

1
Kuldeep Raz