javascript - Why is setInterval in an Angular service only firing one time? - Stack Overflow

admin管理员组

文章数量:1421287

I need to fetch updates from a server every few minutes so I'm using setInterval inside my DeliveriesService.

Here is the relevant part of my deliveries.service.ts

import { Injectable, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Http } from '@angular/http';

import { Delivery, Product } from './delivery';

@Injectable()
export class DeliveriesService implements OnInit {

    private fetchUrl = '';
    private getInt;
    public deliveries$ = new Subject<Array<Delivery>>();

    constructor(private http: Http) { }

    ngOnInit() {
        this.startUpdate();
    }
    startUpdate(): void {
        console.log('starting delivery fetch');
        this.getInt = setInterval(this.fetchDeliveries(), 5 * 60 * 1000);
    }
    stopUpdate(): void {
        clearInterval(this.getInt);
    }
    updateNow(): void {
        this.stopUpdate();
        this.startUpdate();
    }
    fetchDeliveries(): void {
        console.log('updating deliveries');
        this.http.get(this.fetchUrl)
          .map(res => {
            // do stuff, process data, etc.
          }).subscribe();
    }
}

The first interval fires as soon as a ponent imports the service and accesses deliveries$. I get the server data and "updating deliveries" in the console once, but that's it. I even brought the interval down to 30 seconds, just to make sure, and nope.

What am I missing here? Does the service not "run" when it's not being accessed?

(I have a feeling this is a PEBKAC issue where I just don't fully understand Angular yet.)

app.module.ts includes:

providers: [
  // other services and providers
  DeliveriesService,
  // more providers
]

environment:

@angular/cli: 1.0.1
node: 7.8.0
os: darwin x64
@angular/cli: 1.0.1
@angular/mon: 4.1.1
@angular/piler: 4.1.1
@angular/piler-cli: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1

I need to fetch updates from a server every few minutes so I'm using setInterval inside my DeliveriesService.

Here is the relevant part of my deliveries.service.ts

import { Injectable, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Http } from '@angular/http';

import { Delivery, Product } from './delivery';

@Injectable()
export class DeliveriesService implements OnInit {

    private fetchUrl = 'https://my.url';
    private getInt;
    public deliveries$ = new Subject<Array<Delivery>>();

    constructor(private http: Http) { }

    ngOnInit() {
        this.startUpdate();
    }
    startUpdate(): void {
        console.log('starting delivery fetch');
        this.getInt = setInterval(this.fetchDeliveries(), 5 * 60 * 1000);
    }
    stopUpdate(): void {
        clearInterval(this.getInt);
    }
    updateNow(): void {
        this.stopUpdate();
        this.startUpdate();
    }
    fetchDeliveries(): void {
        console.log('updating deliveries');
        this.http.get(this.fetchUrl)
          .map(res => {
            // do stuff, process data, etc.
          }).subscribe();
    }
}

The first interval fires as soon as a ponent imports the service and accesses deliveries$. I get the server data and "updating deliveries" in the console once, but that's it. I even brought the interval down to 30 seconds, just to make sure, and nope.

What am I missing here? Does the service not "run" when it's not being accessed?

(I have a feeling this is a PEBKAC issue where I just don't fully understand Angular yet.)

app.module.ts includes:

providers: [
  // other services and providers
  DeliveriesService,
  // more providers
]

environment:

@angular/cli: 1.0.1
node: 7.8.0
os: darwin x64
@angular/cli: 1.0.1
@angular/mon: 4.1.1
@angular/piler: 4.1.1
@angular/piler-cli: 4.1.1
@angular/core: 4.1.1
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1

• javascript
• angular
• typescript
• setinterval

Share Improve this question Follow asked May 11, 2017 at 6:27 JasonJason 3311 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You need to pass the function reference to be executed instead of passing the return value of the function and use .bind() to set context

setInterval(this.fetchDeliveries.bind(this), 5 * 60 * 1000);

OR

setInterval(()=> this.fetchDeliveries(), 5 * 60 * 1000);

If you need to pass additional parameter to fetchDeliveries

setInterval(this.fetchDeliveries.bind(this), 5 * 60 * 1000, param1, param2);

this.fetchDeliveries(param1, param2){..}

本文标签： javascriptWhy is setInterval in an Angular service only firing one timeStack Overflow