How delays work in JavaScript timing functions

JavaScript, Browser, Timeout · Oct 26, 2022

JavaScript provides two widely used timing functions, setTimeout() and setInterval(). Both of these functions execute a specified function after a given amount of time either once or repeatedly. While this is straightforward, many people don't realize that the delay is merely a suggestion and can be altered by a number of factors.

Delays are not exact

I went into detail about how JavaScript engines execute code in the Event Loop explanation, but let me recap here. As JavaScript is single-threaded, tasks are queued to be executed in a loop. Thus, setTimeout() and setInterval() are tasks that will be executed after at least the given amount of time has elapsed. There is no guarantee, however, that the task will be executed exactly after the given amount of time has elapsed. The delay is a suggestion, signifying the minimum amount of time that must pass before the task is executed. The actual delay can be longer, depending on the current state of the JavaScript engine.

Browser factors

Apart from engine-related delays, there are a few other factors that play a role in the actual delay of a task. Briefly, these are:

  • Browsers throttle nested timeouts and intervals with a delay of at least 4ms, but this can vary depending on the browser.
  • Timeouts and intervals in inactive/background tabs are throttled to a minimum of 1000ms to increase battery life.
  • Known tracking scripts in background tabs can be throttled even further after a certain amount of time.

On a side note, some browsers store delays as a 32-bit signed integer, meaning that delays over 24.8 days will cause an overflow and execute immediately.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Run function asynchronously

    Runs a function in a separate thread by using a Web Worker.

    JavaScript, Browser · Oct 22, 2020

  • Copy to clipboard

    Copies a string to the clipboard. Only works as a result of user action (i.e. inside a click event listener).

    JavaScript, Browser · Jan 11, 2022

  • URL parameters as object

    Creates an object containing the parameters of the current URL.

    JavaScript, Browser · Oct 22, 2020