We all use modern web browsers, and performance is among the most critical aspects of web browsing. Modern web browsers must execute complex programs as well as being reactive to users’ interactions.
setTimeout and setInterval are two methods in JavaScript used to run code or a function asynchronously, allowing us to run them at specific time intervals.
First and foremost, let’s look at these two methods and their functionalities. Then, this article will discuss their limitations in modern browsers.
We can use the setTimeout() method to run a function after a specified waiting time. setTimeout() accepts three parameters.
Syntax
setTimeout(function|code, delay, arg0,arg1,...)
Here is an example of displaying the string “Example of a setTimeout(), which will run after a second.” after a delay of one second.
function exampleFunc() {
alert('Example of a setTimeout(),which will run after a second.');
}
setTimeout(exampleFunc, 1000);
The clearTimeout() function cancels the timer event. Also, it stops the function execution.
let timerID = setTimeout(exampleFunc, 1000); clearTimeout(timerID);
Using setTimeout() with zero delay schedules function execution as soon as possible when the current other queued tasks are finished.
Syntax
setTimeout(function|code, 0) setTimeout(function|code)
Use the setInterval() method to run a function repeatedly after a delay time. The only difference between setInterval and setTimeout() is that setInterval will call a function or execute a code repeatedly with a given delay time. Both setTimeout() and setInterval() allow the same three parameters.
Syntax
setInterval(function|code, delay, arg0,arg1,..)
Here is an example of displaying the string “Example of a setInterval(), which will run every second.” every second.
function exampleFunc2() {
alert('Example of a setInterval(),which will run every second.');
}
setInterval(exampleFunc2, 1000); The clearInterval() function cancels the timer events. Also, it stops the function execution.
let timerID2 = setInterval(exampleFunc2, 1000); clearInterval(timerID2);
The next call is scheduled to begin after the current one with the setTimeout(). Therefore setTimeout() is best used recursively instead of setInterval(), as it has more control over delays.
With setTimeout(), we can define our next call differently based on the current call results. For example, if we have a service that retrieves or checks data every 10 seconds, but the server is overloaded, we can increase the delay seconds. If the service or the function is CPU-intensive, we can analyze the execution time and decide whether to plan the next call sooner or later.
The setTimeout and setInterval can create macro tasks. A macro task is a small function executed after the JavaScript execution stack and microtasks have been cleared.
The browser runs all of the JavaScript on your website on a single thread. Therefore, setTimeout and setInterval will be added to the task queue. The JavaScript event loop continuously checks the task queue for events or tasks waiting to be executed. When the event loop detects that the task queue is not empty, it dequeues the first task in the queue and executes it.
At that moment, if the task’s scheduled time has not yet come to pass, the task will be maintained in the queue until its scheduled time is reached. If the scheduled time has already passed and the task is in the queue, the event loop dequeues the task and executes it immediately.
In such cases, functions take longer than the delay specified in the methods.
The following image shows how things work in a web browser at a high level.
Even though it says setTimeout with zero delays, the browser has limitations for nested timers.
According to HTML Living Standard, “Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds.”
Although you haven’t given setTimeout a specific time limit, it must wait for all the code for queued messages to finish.
The setTimeout() and setInterval() functions can execute text specified through them, exposing them to DOM-based, cross-site scripting (XSS). Therefore, you shouldn’t pass any sensitive data via those functions.
During execution, a JavaScript program is assigned three types of memory, the code area, the call stack, and the heap. Using setTimeout and setInterval can cause memory leaks, as they will have heavy object references kept in their callbacks or active in memory. On the other hand, uncleared timers can run indefinitely if we forget to clear the timer with clearInterval or clearTimeout.
The following image from mozilla.org shows the browser compatibility for setInterval.
The setTimeout and setInterval methods are used to schedule tasks for a specific time. In this article, we discussed what these methods are and their limitations in modern browsers.
These limitations are not to be taken lightly. Choosing what to use when based on your requirements and considering the browser limitations would be best.
Thank you for reading!
Syncfusion’s Essential JS 2 is the only suite you will need to build an app. It contains over 80 high-performance, lightweight, modular, and responsive UI components in a single package. Download a free trial to evaluate these controls today.
If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!