Question

对于我的Angular Project，我生成了一个地理定位组件，并希望重复一个函数findMe()以显示当前位置。

component.ts 中的部分代码如下。

...
export class GeolocationComponent implements OnInit{
 @ViewChild('gmap') gmapElement: any;
 map: google.maps.Map;
 isTracking = false;
 marker: google.maps.Marker;

 constructor(public globalvar: GlobalvarService) { }

 ngOnInit() {
   var mapProp = {
     center: new google.maps.LatLng(-27.542211, 153.1226333),
     zoom: 15,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);

   setInterval(this.findMe(), 3000);

 }

 findMe() {
   if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition((position) => {
       this.showPosition(position);
       console.log("find me");
     });
   } else {
     alert("Geolocation is not supported by this browser.");
   }
 }

 showPosition(position) {
   this.globalvar.latitude = position.coords.latitude;
   this.globalvar.longitude = position.coords.longitude;

   let location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
   this.map.panTo(location);

   if (!this.marker) {
     this.marker = new google.maps.Marker({
       position: location,
       map: this.map,
       title: 'Got you!'
     });
   }
   else {
     this.marker.setPosition(location);
   }
 }
 ...

在

ngOnInit(),

我使用

setInterval(this.findMe(), 3000);

通过检查日志，我看到findMe()仅被调用一次，但没有像我期望的那样被重复。

我也尝试过更改findMe() ==> findMe

setInterval(this.findMe, 3000);

这一次，日志反复出现，但是总会出现错误：

ERROR TypeError: _this.showPosition is not a function

请帮助我如何反复致电findMe()以及为什么会发生错误？

Answer 1

调用间隔的正确方法是使用函数声明// RUN 2 val pqt = spark.read.text("/FileStore/tables/TTT.txt").cache benchmarkSum(pqt)。如前所述，如果包含（），则只会执行一次。

setInterval附带的问题之一是它更改了执行函数的setInterval(this.findMe, 3000);上下文。要解决此问题，您需要强制使其保持恒定。

this

其他信息：

Answer 2

您可以只使用保留this上下文的箭头功能：

setInterval(() => this.findMe(), 3000);

Answer 3

您可以使用箭头函数语法使其正常工作。

ngOnInit() {
    setInterval(() => {
        this.findMe()
    }, 4000);
}

findMe = () => {
    console.log('found');
}

箭头功能始终将其作为组件引用。

示例-https://stackblitz.com/edit/angular-wkv2he

Answer 4

尝试

 setInterval(() => {
    this.findMe()
 }, 3000);

但是我认为比使用更好的解决方案是使用Observable interval。

interval(3000).subscribe(res => {
   this.findMe()
})

或者在旧版本的Angular中：）

Observable.interval(3000).subscribe(res => {
   this.findMe()
})

重复功能在Angular中失败

4 个答案: