1

I see in some question What is minimum millisecond value of setTimeout? people talk about the "minimal timeout of setTimeout", but I can't really understand it.

It says the minimal timeout value in HTML5 spec is 4ms, so I think, if I run following code in browsers (say Chrome):

setTimeout(function() { console.log("333"); }, 3);
setTimeout(function() { console.log("222"); }, 2);
setTimeout(function() { console.log("111"); }, 1);
setTimeout(function() { console.log("000"); }, 0);

the output should be:

333
222
111
000

But actually it is:

111
000
222
333

Seems like they still be run according to the specified timeout even if they are less than 4 (expect the 0 and 1)

How should I understand the value 4ms?

Community
  • 1
  • 1
Freewind
  • 193,756
  • 157
  • 432
  • 708
  • `4ms` might be better understood as `250fps`. A little high, don't you think? – Niet the Dark Absol Jun 21 '16 at 10:07
  • 2
    I feel you must read about [__`Event loop`__](https://developer.mozilla.org/en/docs/Web/JavaScript/EventLoop#Event_loop) – Rayon Jun 21 '16 at 10:14
  • 2
    And [___`Reasons for delays longer than specified`___](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Reasons_for_delays_longer_than_specified) – Rayon Jun 21 '16 at 10:18

2 Answers2

1

The limit of 4 ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward.

http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers

To implement a 0 ms timeout in a modern browser, you can use window.postMessage()

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

More info

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

https://developer.mozilla.org/en/docs/Web/JavaScript/EventLoop#Event_loop

rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • OK, so what is your explanation for what happens with the OP's code? – nnnnnn Jun 21 '16 at 10:16
  • That will depend on the JS engine implementation ... meaning you might get different results in other browsers. I suggest you use [console.time](https://developer.mozilla.org/en-US/docs/Web/API/Console/time) to understand those time delays a little better. One possible explanation is that the JS engine could pass an extra parameter to the callback routine, indicating the "actual lateness" of the timeout in milliseconds. – rafaelcastrocouto Jun 21 '16 at 11:13
1

After reading the recommended articles (thanks to @Rayon and @rafaelcastrocouto), and also this one:

http://www.adequatelygood.com/Minimum-Timer-Intervals-in-JavaScript.html

I realise that maybe I misunderstood the meaning of "minimal" delay value.

The specified timeout in setTimeout has two meanings:

  1. The function will run when or after specified timeout (not before that)
  2. The order will be decided by the value of the specified timeout, the smaller the earlier (and in some platform, 0 is considered the same as 1), and first added will be earlier if they have the same timeout

We don't need to concern the "minimal" delay value (e.g. 4ms) in this layer.

Then the tasks will be executed by the Javascript runtime. The runtime will take the tasks from the event queue one by one (also check if the timeout is OK), and execute them. But for some performance issue, the runtime can't really run the next task immediately after the previous one finished, there might be a tiny delay(according to different runtime implementations), and in HTML5 spec, the delay should be >= 4ms (it was 10ms in earlier browsers)

Freewind
  • 193,756
  • 157
  • 432
  • 708