Why javascript setTimeout(()={},time) takes more then given timeout

setTimeout does not guarantee that the callback method will be called after given exactly delay. Its depends on callstack

To understand this… lets quickly have look into how below code can be executed…

console.log('line one started');
.
.
setTimeout(function(){
  console.log('may be after a sec');
},1000);
.
.
console.log('last line');
.
.
.
.
N-number of lines

What happen if we run above javascript code…

very first Global execution context (GEC) will be created and that will be pushed inside the callstack.

Now code will run line by line

In console initially we can see first line output and last line output and later we can see timeout console print.because of javascript event loop.

What is eventLoop?

Above code Snippet we have the main function which has 2 console.log commands logging ‘….’ and ‘…’ to the console. Sandwiched between them is a setTimeout call which logs ‘B’ to the console with 0ms wait time.

1. The call to the main function is first pushed into the stack (as a frame). Then the browser pushes the first statement in the main function into the stack which is console.log(‘line one started’). This statement is executed and upon completion that frame is popped out. Alphabet `line one started` is displayed in the console.
2. The next statement (setTimeout() with callback function() and 1000ms wait time) is pushed into the call stack and execution starts. setTimeout function uses a Browser API to delay a callback to the provided function. The frame (with setTimeout) is then popped out once the handover to browser is complete (for the timer).
3. console.log(‘last line ’) is pushed to the stack while the timer runs in the browser for the callback function. In this particular case, as the delay provided was 0ms, the callback will be added to the message queue as soon as the browser receives it (ideally).

After the execution of the last statement in the main function, the main() frame is popped out of the call stack, thereby making it empty. For the browser to push any message from the queue to the call stack, the call stack has to be empty first. That is why even though the delay provided in the setTimeout() was 0 seconds, the callback has to wait till the execution of all the frames in the call stack is complete.

so thats why setTimeout takes more then given timeout

So thats why setTimeout takes more then given timeout

the below sample code takes more than given 2 seconds

function setTimeouTExmple(){
  console.log('A');
  setTimeout(
    function exec(){ console.log('B'); }
  , 2);
  runWhileLoopForNSeconds(3);
  console.log('C');
}
setTimeouTExmple();
function runWhileLoopFewSeconds(sec){
  let start = Date.now(), now = start;
  while (now - start < (sec*1000)) {
    now = Date.now();
  }
}

5.

Now the callback is pushed into the call stack and executed. The alphabet ‘may be after 5 sec’ is display on the console. This entire process of steps are the event loop of javascript.

This is the event loop of javascript.