How come repeatedly using window.setTimeout for the same function does not create an endless loop?

Question

How come repeatedly using window.setTimeout for the same function does not create an endless loop?

I recently came across this code snippet:

class CentralControlUnit {
    private devices: Device[] = [];
    constructor() {
        // Adding a new device MobileDevice
        this.devices.push(new MobileDevice(this));
    }

    activate() {
        for (var i= 0; i < this.devices.length; i++) {
            // Activating the device
            this.devices[i].switchOn();
        }
        window.setTimeout(() => this.activate(), 1000);
    }

    triggerAlarm(alertMessage: string) {
        console.log('Alert! ' + alertMessage);
    }
}

var ccu = new CentralControlUnit();
ccu.activate();

I'm curious why

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

doesn't create an infinite loop.

From what I understand, ccu.activate() iterates through each device in devices first and then schedules another call to activate using window.setTimeout, which repeats every 1 second.

Check out Listing 3-3. Delegation in Pro TypeScript: Application-Scale JavaScript Development for more details.

javascript typescript

Answer 1

Answer №1

Put simply, there is no risk of creating an infinite loop when using setTimeout since it does not block the code execution. Instead, the function provided to execute, () => this.start(), is queued up and executed after a one-second delay. The start method finishes executing after calling window.setTimeout, preventing an actual infinite loop from occurring in the traditional sense. Typically, the code will remain in a state of waiting until the next timer event.

While it is true that the code continually schedules a timer to call the start method, it does not result in an infinite loop as control is returned to the javascript runtime each time.

Answer 2

Put simply, there is no risk of creating an infinite loop when using setTimeout since it does not block the code execution. Instead, the function provided to execute, () => this.start(), is queued up and executed after a one-second delay. The start method finishes executing after calling window.setTimeout, preventing an actual infinite loop from occurring in the traditional sense. Typically, the code will remain in a state of waiting until the next timer event.

While it is true that the code continually schedules a timer to call the start method, it does not result in an infinite loop as control is returned to the javascript runtime each time.

Answer 3

Answer №2

Implementing a delayed 1-second infinite loop

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

can be likened to

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

This is known as an Arrow Function

Answer 4

Implementing a delayed 1-second infinite loop

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

can be likened to

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

This is known as an Arrow Function

Answer 5

Answer №3

If you're looking for a solution, consider utilizing the setInterval method. This can create an indefinite loop that is easily terminated using clearInterval.

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

window.clearInterval(this.interval);

Another option is to utilize:

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

This approach eliminates the need for a traditional for loop.

Answer 6

If you're looking for a solution, consider utilizing the setInterval method. This can create an indefinite loop that is easily terminated using clearInterval.

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

window.clearInterval(this.interval);

Another option is to utilize:

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

This approach eliminates the need for a traditional for loop.

Answer 7

Answer №4

A common mistake is trying to use setTimeout within a class, where "this" refers to the setTimeout function itself instead of the intended class. To remedy this issue, consider the following code:

class CentralControlUnit {
    private sensors: Sensor[] = [];
    
    constructor() {
        // Add instances of various sensors
        this.sensors.push(new HeatSensor(this));
    }
    
    start() {
        let self = this; // Store reference to current instance
        
        for (let i= 0; i < this.sensors.length; i++) {
            // Invoke sensor check method
            this.sensors[i].check();
        }

        window.setTimeout(() => self.start(), 1000); // Call start method every 1 second
    }

    activateAlarm(message: string) {
        console.log('Alarm Triggered - ' + message);
    }
}

let controlPanel = new CentralControlUnit();
controlPanel.start();

Answer 8

A common mistake is trying to use setTimeout within a class, where "this" refers to the setTimeout function itself instead of the intended class. To remedy this issue, consider the following code:

class CentralControlUnit {
    private sensors: Sensor[] = [];
    
    constructor() {
        // Add instances of various sensors
        this.sensors.push(new HeatSensor(this));
    }
    
    start() {
        let self = this; // Store reference to current instance
        
        for (let i= 0; i < this.sensors.length; i++) {
            // Invoke sensor check method
            this.sensors[i].check();
        }

        window.setTimeout(() => self.start(), 1000); // Call start method every 1 second
    }

    activateAlarm(message: string) {
        console.log('Alarm Triggered - ' + message);
    }
}

let controlPanel = new CentralControlUnit();
controlPanel.start();

How come repeatedly using window.setTimeout for the same function does not create an endless loop?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Selecting Content Dynamically with jQuery

The type 'BusinessParameter[]' does not share any properties with the specified type

Error Code 1: Cordova FileTransfer Writing Issue

Navbar Growth Effect

JS: Submitting form data through POST method but fetching it with GET method?

What could be the reason for the malfunction of this angular binding?

Using JavaScript to dynamically hide an ASP ComboBox based on the selected value in another ASP ComboBox in an ASP.NET application

"Regardless of the circumstances, the ionic/angular service.subscribe event

The TypeError encountered when using vue.js push arises from attempting to access the 'name' property of an undefined value

What steps should I take to address conflicting type identifiers between Cypress and jQuery?

What is the significance of the 'this' context type void not being assignable to type rule?

Delay in Angular 2 Change Detection when using Arrays and @Inputs is experienced for a few seconds

Silence and Restore background noise

Employing promises for fetching data via XHR results in a promise that is still pending

I am attempting to gather user input for an array while also ensuring that duplicate values are being checked

enhancing a node-express-browserify project with jadeify

Problem with deploying a Nextjs project on cPanel

Tips for implementing vue-multiselect tagging within an ASP.NET solution in Visual Studio 2017

The pop-up window created programmatically refuses to close

What is the process for accessing the gallery in phonegap on an android device?