7

When I execute the below code in the console I am getting as:

1,4, undefined 3,2.

I would like to know why its not executing as 1,3,4 and 2 since in setTimeout(function(){console.log(3)}, 0); the milliseconds param is 0.

(function() {
   console.log(1); 
   setTimeout(function(){console.log(2)}, 1000); 
   setTimeout(function(){console.log(3)}, 0); 
   console.log(4);
})();
Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
  • 5
    the `undefined` is from the console, it's the return of the execution of the function, not outputted with console.log – Hacketo Jan 23 '15 at 18:03
  • it's returning 1,4,3,2 because when you use setTimeout you put the code to run in another thread – Icaro Martins Jan 23 '15 at 18:06
  • 2
    Ok, missed the point of *Code entered directly in Console input*. Otherwise on a page that script will never log `undefined`. – Roko C. Buljan Jan 23 '15 at 18:27
  • Closed as duplicate cause there is explained really well what's actually going on. **Read all the comments and all answers** cause the accepted answer is not properly getting to the point of Browser queue. – Roko C. Buljan Jan 23 '15 at 18:57
  • @RokoC.Buljan This was not the point of the question.. and there is no accepted answer – Hacketo Jan 23 '15 at 18:59
  • @RokoC.Buljan and I am getting this point if you read the decomposition. – Hacketo Jan 23 '15 at 19:05
  • @Hacketo **that's exactly the point of the question!**. Question 1. is answered simply by knowing *defacto* that calls of functions that are executed with no `return` value lead to `undefined` (console run only and parse-time silent). Question 2. and 3. are all about `setTimeout`; *in short* another way to stack executions to the window events queue, almost exactly like `DOMContentLoaded` does, therefore the (*un-*)expected result are thrown - lately stack after the `window.console` stack. All explained in the other question comments and answers. – Roko C. Buljan Jan 23 '15 at 19:07
  • @RokoC.Buljan I thought all the points (1,2,3) were questions .. mb – Hacketo Jan 23 '15 at 19:12
  • @Hacketo majority wins. If you want I can close it again as duplicate of: http://stackoverflow.com/questions/24975899/prompt-return-as-undefined-in-a-function-scope-issue :) Yes, those [two](http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful) answer all the OP questions. – Roko C. Buljan Jan 23 '15 at 19:14
  • @RokoC.Buljan I edited the question as it should be formatted. make more sense, ianaya89 did not edit that part of the formatting ... – Hacketo Jan 23 '15 at 19:17
  • @Hacketo waiting for anyone to reopen the question so I can write an extensive answer with all the technical documentation and details. making it than actually a duplicate of all the already provided answers on SO on that topic (I've mentioned above the related links (and there's even more)). Or rather let's keep it closed since it is actually a dupe since the `setTimeout` stack feature – Roko C. Buljan Jan 23 '15 at 19:21
  • @RokoC.Buljan I'm not, I formatted the question properly , now it make more sense that is focused on Browser queue, see this [edit](http://stackoverflow.com/revisions/28115853/2) that maked 3 questions – Hacketo Jan 23 '15 at 19:23

3 Answers3

6

Here's a great explanation by John Resig:

http://ejohn.org/blog/how-javascript-timers-work/

But the bottom line is console.log(1) and (4) are executed 'in-line' and 2 and 3 are placed in the event queue, and don't get executed until the all of the in-line code is executed. So, even though the delay is 0 for (3), it still occurs after all statements are executed.

I'm not getting the undefined message when I test your code either.

Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
nril
  • 558
  • 2
  • 7
4

The undefined is, as mentioned in a comment, the return value of your function.

The reason why 4 comes before 3 is simply that there is no parallelism in JavaScript so the timer callbacks cannot execute until your function has returned.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
4

Short answer: the undefined comes from the result of the executed statement in your JavaScript console, the function return nothing, so undefined

Let try to decompose this:

  1. console.log(1); // 1
  2. console.log(4); // 4
  3. the code you executed return undefined
  4. setTimeout(function(){console.log(3)}, 0); // 3 Executed the next stack
  5. setTimeout(function(){console.log(2)}, 1000); // 2 1 sec after

Edit: test this

var a = (function(){})(); // print undefined, a is also undefined, no returned value
Audwin Oyong
  • 2,247
  • 3
  • 15
  • 32
Hacketo
  • 4,978
  • 4
  • 19
  • 34