Angular 5 zu viele Geolocation Position Antworten

Question

Ich möchte in Angular 5 Komponente schreiben, Funktion, die mich alle 3 Sekunden meine aktuelle Position, wenn es geändert wurde.

Mein Code sieht wie folgt aus:

export class WorkComponent implements OnInit { 

constructor(private userService: UserService) {} 

ngOnInit() { 
    this.subscribeCurrentPosition(); 
    } 

    subscribeCurrentPosition() { 
    if (window.navigator.geolocation) { 
     window.navigator.geolocation.watchPosition(
     (position) => { 
      this.myLocation = new TrackLocation(null, position.coords.latitude, position.coords.longitude); 
      this.userService.sendCurrentPosition(this.myLocation, this.supplierId); //send position to backend 
      setInterval(() => this.subscribeCurrentPosition(), 3000); 
     }, (error) => { 
      LoggingService.error('Geolocation error: '+ error); 
     }); 
     } else { 
     LoggingService.error('Geolocation not supported in this browser'); 
     } 
    } 
} 

I Standortwechsel in Funktion subscribeCurrentPosition empfangen(), aber Problem ist, dass alle 3 Sekunden Funktion mehr und mehr mal 1 genannt wird, 2, 4 .. Es scheint wie jeder Funktionsaufruf, ruft 2 mal die nächste Funktion auf. Und dann erhielt ich eine Warnung, dass ich zu viele Anfragen von Geolocation API sende.

Ich weiß nicht, warum Funktion subscribeCurrentPosition() mehr als einmal alle 3 Sekunden aufruft. Es gibt nur eine Instanz der Komponente in der Zeit.

Answer 1

Dies ist, weil Sie setInterval verwenden. Jedes Mal, wenn Sie setInterval verwenden, erstellen Sie eine neue Aufgabe, die auf unbestimmte Zeit wiederholt wird. Und Sie rufen rekursiv sentInterval jedes Mal auf, wenn Ihre Funktion ausgeführt wird. Deshalb sehen Sie, wie sich diese Aufgaben im Laufe der Zeit vervielfachen. Verwenden Sie stattdessen setTimeout. Es wird nur einmal ausgeführt. Und da Sie einen rekursiven Mechanismus verwenden, wird es weiterhin jedes Mal aufgerufen werden erhalten Sie eine Antwort:

subscribeCurrentPosition() { 
    if (window.navigator.geolocation) { 
     window.navigator.geolocation.watchPosition(
     (position) => { 
      this.myLocation = new TrackLocation(null, position.coords.latitude, position.coords.longitude); 
      this.userService.sendCurrentPosition(this.myLocation, this.supplierId); //send position to backend 
      setTimeout(() => this.subscribeCurrentPosition(), 3000); 
     }, (error) => { 
      LoggingService.error('Geolocation error: '+ error); 
     }); 
     } else { 
     LoggingService.error('Geolocation not supported in this browser'); 
     } 
    } 

Oder Sie setInterval verwenden können, aber tun es außerhalb Ihrer Funktion:

subscribeCurrentPosition() { 
    if (window.navigator.geolocation) { 
     window.navigator.geolocation.watchPosition(
     (position) => { 
      this.myLocation = new TrackLocation(null, position.coords.latitude, position.coords.longitude); 
      this.userService.sendCurrentPosition(this.myLocation, this.supplierId); //send position to backend 
     }, (error) => { 
      LoggingService.error('Geolocation error: '+ error); 
     }); 
     } else { 
     LoggingService.error('Geolocation not supported in this browser'); 
     } 
    } 
    setInterval(() => this.subscribeCurrentPosition(), 3000);