setTimeout and setInterval methods: Ionic 2

Today lets learn how to use JavaScript’s setTimeout and setInterval methods in our Ionic 2 project(which uses Typescript by default).

In this tutorial, I’ll be delaying the display of some list items using setTimeout and setInterval methods of JavaScript and will display the company names(as list items) on the home page.

Using setTimeout and setInterval methods: Ionic 2

[youtube https://www.youtube.com/watch?v=dyXZcS8wIWc]

YouTube Link: https://www.youtube.com/watch?v=dyXZcS8wIWc [Watch the Video In Full Screen.]

src/providers/data.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class Data {
data: any;
  constructor(public http: Http) {
    this.data = [
      {name: 'Microsoft', code: 324, product: 'Windows 10'},
      {name: 'Apple', code: 678, product: 'iPhone 7'},
      {name: 'Google', code: 567, product: 'Pixel'},
      {name: 'Oracle', code: 89, product: 'RDBMS'},
      {name: 'IBM', code: 542, product: 'Computer Hardware and Software'}
    ];
  }
 
  loadAll(){
      return Promise.resolve(this.data);
  };
}

Here we have an array with couple of objects, which has company name, unique id/code and product details. We also have defined a method loadAll() which returns this.data array as a promise.

src/pages/home/home.html

 < ion-list>
    < ion-item *ngFor="let Company of companies">
      {{Company.name}}
    < /ion-item>
  < /ion-list>

src/pages/home/home.ts: setInterval

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Data } from '../../providers/data';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  companies: any;
  constructor(public navCtrl: NavController, public data: Data) {
    var temp = this;
    var i = 0;
    setInterval(function(){ alert('count '+(i++));
        temp.data.loadAll().then(result => {
            temp.companies =  result;
        });
    }, 3000);
  }
}

Here we do not use this keyword/variable inside setInterval method, as it would reference to setInterval method and not the HomePage class component. So we take a temporary variable temp outside setInterval method and assign this keyword to it. Now using temp variable we can invoke class component properties and methods.

setinterval method keeps calling itself after every set interval of time. It keeps calling itself until it is stopped using clearInterval() method.

    var temp = this;
    var i = 0;
    var id = setInterval(function(){ alert('count '+(i++));
        temp.data.loadAll().then(result => {
            temp.companies =  result;
        });
    }, 3000);
    clearInterval(id);

Similarly, setTimeout method
src/pages/home/home.ts: setTimeout

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Data } from '../../providers/data';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  companies: any;
  constructor(public navCtrl: NavController, public data: Data) {
    var temp = this;
    var i = 0;
    setTimeout(function(){ 
        temp.data.loadAll().then(result => {
            temp.companies =  result;
        });
    }, 3000);
  }
}

Here setTimeout is executed only once after 3 seconds or 3000 milliseconds. To halt or clear the setTimeout event, we can use clearTimeout() method.

    var temp = this;
    var i = 0;
    var id = setTimeout(function(){ 
        temp.data.loadAll().then(result => {
            temp.companies =  result;
        });
    }, 3000);
   clearTimeout(id);

Note:
Make sure to import the page component and service provider in src/app/app.module.ts file.

Leave a Reply Cancel reply