javascript - Angular 中的重复功能失败

Question

对于我的 Angular 项目，我生成了一个地理位置组件，并希望重复函数 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);

这次日志重复出现，但总是报错:

错误类型错误:_this.showPosition 不是函数

您能否帮助我如何重复调用 findMe() 以及为什么会发生错误？

Answer 1

调用间隔的正确方法是使用函数声明setInterval(this.findMe, 3000);。正如您所指出的，如果您包含 ()，它只会执行一次。

setInterval 带来的问题之一是它更改了执行函数的 this 上下文。要解决这个问题，您需要强制它保持不变。

constructor(public globalvar: GlobalvarService) {
  this.findMe = this.findMe.bind(this);
}

<小时/>

其他信息:

• Documentation
• StackOverflow Question