Saya ingin menulis dalam komponen Angular 5, fungsi yang membuat saya setiap 3 detik lokasi saya saat ini jika diubah.

Kode saya terlihat seperti itu:

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

Saya menerima perubahan lokasi dalam fungsi subscribeCurrentPosition(), tetapi masalahnya adalah bahwa setiap 3 detik fungsi dipanggil lebih dan lebih kali 1, 2, 4.. Sepertinya setiap fungsi memanggil, memanggil 2 kali fungsi berikutnya. Dan kemudian saya menerima peringatan bahwa saya mengirim terlalu banyak permintaan dari api geolokasi.

Saya tidak tahu mengapa fungsi subscribeCurrentPosition() memanggil lebih dari satu kali setiap 3 detik. Hanya ada satu contoh komponen dalam waktu.

1
adam-pociejowski 13 Desember 2017, 23:03

1 menjawab

Jawaban Terbaik

Ini karena Anda menggunakan setInterval. Setiap kali Anda menggunakan setInterval, Anda membuat tugas baru yang akan berulang tanpa batas. Dan Anda secara rekursif memanggil sentInterval setiap kali fungsi Anda dijalankan. Itulah mengapa Anda melihat tugas-tugas ini berlipat ganda seiring berjalannya waktu. Gunakan setTimeout sebagai gantinya. Itu hanya akan dieksekusi sekali. Dan karena Anda menggunakan mekanisme rekursif, itu akan terus dipanggil setiap kali Anda menerima respons:

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

Atau, Anda dapat menggunakan setInterval, tetapi lakukan di luar fungsi Anda:

  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);
3
Matt Spinks 13 Desember 2017, 20:09