Your browser might silently change setTimeout(f, 0) to setTimeout(f, 5)

Updated . Posted . Visible to the public.

When you're nesting setTimeout(f, 0) calls, your browser will silently increase the delay to 5 milliseconds after the fourth level of nesting. This is called "timeout clamping".

Deeply nested setTimeout can happen when you're using a non-native Promise polyfill with long chains of then calls.
The native Promise implementation ( Can I use link Show archive.org snapshot ) uses microtasks and is thus not subject to timeout clamping.

If you need short nested timeouts, you can use an setImmediate Show archive.org snapshot polyfill. This employs various hacks to give you access to the microtask queue.

Measuring timeout clamping

Here is a deeply nested setTimeout call:

var start = Date.now();

function printElapsed() {
  var now = Date.now();
  console.log(now - start);
}

setTimeout(function() {
  printElapsed();
  setTimeout(function() {
    printElapsed();
    setTimeout(function() {
      printElapsed();
      setTimeout(function() {
        printElapsed();
        setTimeout(function() {
          printElapsed();
          setTimeout(function() {
            printElapsed();
            setTimeout(function() {
              printElapsed();
              setTimeout(function() {
                printElapsed();
                setTimeout(function() {
                  printElapsed();
                  setTimeout(function() {
                    printElapsed();
                    setTimeout(function() {
                      printElapsed();
                    }, 0);
                  }, 0);
                }, 0);
              }, 0);
            }, 0);
          }, 0);
        }, 0);
      }, 0);
    }, 0);
  }, 0);
}, 0);

This yields the following messages:

2
3
5
6
11
16
20
25
29
33
38

Observe how after 6 the time difference jumps from 2 to 5 milliseconds.

Timeouts are also clamped in background tabs

On a similar note, all major browsers have implemented throttling rules for setInterval and setTimeout calls from tabs that are currently in the background. You can test it yourself by running this little test suite and change to a different tab during its runtime. The expected runtime drastically increases in Chrome, Firefox and Safari:
https://testbed.nicon.nl/timeouttest/ Show archive.org snapshot

See also: Stop animations and network polling when the document tab isn't visible

Henning Koch
Last edit
Michael Leimstädtner
Keywords
async, asynchronous
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2016-08-22 09:20)