Call setTimeout without delay

by

Very simplified:

Browsers are single threaded and this single thread (The UI thread) is shared between the rendering engine and the js engine.

If the thing you want to do takes alot of time (we talking cycles here but still) it could halt (paus) the rendering (flow and paint).

In browsers there also exists “The bucket” where all events are first put in wait for the UI thread to be done with whatever it´s doing. As soon as the thread is done it looks in the bucket and picks the task first in line.

Using setTimeout you create a new task in the bucket after the delay and let the thread deal with it as soon as it´s available for more work.

A story:

After 0 ms delay create a new task of the function
and put it in the bucket. At that exact moment the UI thread is busy
doing something else, and there is another tasks in the bucket
already. After 6ms the thread is available and gets the task infront
of yours, good, you´re next. But what? That was one huge thing! It has
been like foreeeeeever (30ms)!!

At last, now the thread is done with that and comes and gets your
task.

Most browsers have a minimum delay that is more then 0 so putting 0 as delay means: Put this task in the basket ASAP. But telling the UA to put it in the bucket ASAP is no guarantee it will execute at that moment. The bucket is like the post office, it could be that there is a long queue of other tasks. Post offices are also single threaded with only one person helping all the task… sorry customers with their tasks. Your task has to get in the line as everyone else.

If the browser doesn´t implement its own ticker, it uses the tick cycles of the OS. Older browsers had minimum delays between 10-15ms. HTML5 specifies that if delay is less then 4ms the UA should increase it to 4ms. This is said to be consistent across browsers released in 2010 and onward.

See How JavaScript Timers Work by John Resig for more detail.

Edit: Also see What the heck is the event loop anyway? by Philip Roberts from JSConf EU 2014. This is mandatory viewing for all people touching front-end code.

More Related Contents:

  1. Why is set.timeout not working in this php while loop?
  2. Why is the method executed immediately when I use setTimeout?
  3. How can I pass a parameter to a setTimeout() callback?
  4. Calling functions with setTimeout()
  5. Pass correct “this” context to setTimeout callback?
  6. Combination of async function + await + setTimeout
  7. setTimeout calls function immediately instead of after delay
  8. Difference between setTimeout with and without quotes and parentheses
  9. Why is my function call that should be scheduled by setTimeout executed immediately? [duplicate]
  10. Execute script after specific delay using JavaScript
  11. What is the reason JavaScript setTimeout is so inaccurate?
  12. JavaScript : For loop with timeout
  13. Passing functions to setTimeout in a loop: always the last value?
  14. JavaScript setTimeout() won’t wait to Execute? [duplicate]
  15. Javascript SetTimeout and Loops [duplicate]
  16. setTimeout() is not waiting [duplicate]
  17. Is there a faster way to yield to Javascript event loop than setTimeout(0)?
  18. What happens to setTimeout when the computer goes to sleep?
  19. setTimeout behaviour with blocking code
  20. How to tell .hover() to wait?
  21. stop settimeout in recursive function
  22. Why doesn’t setTimeout(.., 0) execute immediately?
  23. Is it possible to chain setTimeout functions in JavaScript?
  24. Are equal timeouts executed in order in Javascript?
  25. Global variable is logged as undefined when passed as parameter to setTimeout callback function
  26. How to use “setTimeout” to invoke object itself
  27. How browser executes Javascript and renders asynchronously
  28. Why does everything display at once, using setTimeout in Javascript?
  29. Can I see if a timer is still running?
  30. Will a recursive ‘setTimeout’ function call eventually kill the JS Engine?

Leave a Comment