为什么为同一函数调用window.setTimeout不会引入无限循环？

Question

I saw the following code:

class MasterControlPanel {
    private sensors: Sensor[] = [];
    constructor() {
        // Instantiating the delegate HeatSensor
        this.sensors.push(new HeatSensor(this));
    }

    start() {
        for (var i= 0; i < this.sensors.length; i++) {
            // Calling the delegate
            this.sensors[i].check();
        }
        window.setTimeout(() => this.start(), 1000);
    }

    startAlarm(message: string) {
        console.log('Alarm! ' + message);
    }
}

var cp = new MasterControlPanel();
cp.start();

Why window.setTimeout(() => this.start(), 1000); doesn't introduce infinite loop?

Based on my understanding, cp.start() will first iterate each sensor inside sensors and then call the window.setTimeout which in turn calls the start again after 1 second delay.

Reference: Listing 3-3. Delegation in Pro TypeScript: Application-Scale JavaScript Development

Answer 1

In short, it doesn't introduce an infinite loop because setTimeout doesn't block. Instead, the function you give it to execute, () => this.start() is added to a queue and executed after 1 second of time passes. The start method returns after calling window.setTimeout, and thus doesn't cause an infinite loop in the imperative sense. Most of the time, the code will be in a state of waiting until the next timer comes up.

That the code infinitely schedules a timer to call the start method is also true, but it isn't an infinite loop because it returns control to the javascript runtime.

Answer 2

It does introduce an infinite loop, delayed 1 sec between each call

window.setTimeout(() => this.start(), 1000);

is almost the same as

var _this = this; 
window.setTimeout(function(){ _this.start(); }, 1000);

it's called Arrow Function

Answer 3

Maybe you need setInterval . That one would create a infinite loop which you can clear by using clearInterval .

this.interval = window.setInterval(() => {
...
}, 5000);

window.clearInterval(this.interval);

Also you can do

this.sensors.forEach(sensor => sensor.check())

Instead of using for loop.

Answer 4

You can't use this in the setTimeout, because it refers to the setTimeout, not to your class. Try this :

class MasterControlPanel {
    private sensors: Sensor[] = [];
    constructor() {
        // Instantiating the delegate HeatSensor
        this.sensors.push(new HeatSensor(this));
    }
    var that = this;
    start() {
        for (var i= 0; i < this.sensors.length; i++) {
            // Calling the delegate
            this.sensors[i].check();
        }
        window.setTimeout(() => that.start(), 1000);
    }

    startAlarm(message: string) {
        console.log('Alarm! ' + message);
    }
}

var cp = new MasterControlPanel();
cp.start();