Call a function every 10 seconds Angular2

Question

I try to create Timerone that calls API callevery 10 seconds I use setTimeOut, but the fact is that it becomes an infinite loop, and even if I click on another page, it continues to join the if condition.

Example:

I call this using the 10 second API call method

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

And this is the method onTimeOut()...

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

I heard about Debounceand rxjs/rs, but I am not familiar with them, could you give me some tips to do the same with this? Or, if this method is more efficient, go ahead and explain to me why it becomes in a loop.

The goal is when it joins the if and clicks the page, it stops the timer.

Answer 1

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

this.sub.unsubscribe();

interval

import 'rxjs/add/observable/interval';

Answer 2

observable.timer angular.

 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");

  }
}

Answer 3

, setTimeout Angular, Observable. timer, ( TimerObservable, , , ):

timer = Observable.timer(initialDelay, period);

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

RxJS Observable , promises, Angular - , RxJS - .

RxJS