Call a function every 10 seconds Angular2

Question

I'm trying to create a Timer that calls an API call every 10 seconds, I'm using setTimeOut but the thing is that it becomes an infinite loop, and even if I push to another page it keeps joining the if condition.

Example :

I call this on a method to start the 10 seconds API calls

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

And this is the onTimeOut() method...

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

I've heard about Debounce and rxjs/rs but I'm not familiar with them, could you give me some tips to do the same with that? Or if this way is more efficient go ahead and explain to me why it becomes to a loop.

The goal is when it joins the if and push the page, stop the timer.

Answer 1

Better use observables

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

to stop it use

this.sub.unsubscribe(); 

Make sure to import interval with

import 'rxjs/add/observable/interval'; 

Answer 2

from RxJS 6+ you just use interval.

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

you can use Subscription with the interval.

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();     } }