如何避免Angular可观察到的“ InternalError：过多递归”？

Question

I've got a simple Angular observable that should run continuously, checking a time difference on each loop, and looping once a second. I'm getting "InternalError: too much recursion" when I run it. According to this: http://bonsaiden.github.io/JavaScript-Garden/#dealing-with-possible-blocking-code I'm using the correct method. How to fix?

The Angular observable:

export class MyService {
  private lastHeartBeatTime = null; // Time of the last heartbeat
  private heartBeatTimeoutId = null;

  private secondsToHeartbeatAlert = 5; // Number of seconds of no heartbeat 

  constructor() {
    this.lastHeartBeatTime = performance.now(); // Initialise local heartbeat variable with current time
  }

  subscribeToHeartbeat(callbackfn): any {
    // Post a value via the observable to cause an alert to be raised:
    if((performance.now() - this.lastHeartBeatTime) / 1000 >= this.secondsToHeartbeatAlert) return(true);
    // Create a new timeout to call this function again after the specified num of milliseconds (e.g. after 1 second):

    // **** PROBLEM HERE: ***
    else this.heartBeatTimeoutId = setTimeout(this.subscribeToHeartbeat(callbackfn), 1000);
  }
}

Subscription within another component:

// Subscribe to heartbeat over websockets:
MyService.subscribeToHeartbeat(this.handleHeartbeatFailure);

// Handler:
  handleHeartbeatFailure:any = (message) => {
   alert('Websocket is down!")
  }

Answer 1

You are calling the function and not assigning it in your timeout

setTimeout(this.subscribeToHeartbeat(callbackfn), 1000);

needs to be

setTimeout(() => this.subscribeToHeartbeat(callbackfn), 1000);

or you can use bind

setTimeout(this.subscribeToHeartbeat.bind(this, callbackfn), 1000);