Question

it maybe called after ‘some’ normal code is executed? but i not sure…
it would be great if some one kind enough to depict a big picture of how javascript code is executed in a browser.

Answer 1

For most of the time the browser execution thread is idle, not running any code. When you register some function to be executed using setTimeout, it will be executed not earlier than after given amount of milliseconds.

Now: if after given amount of time some other code is executing (like event handler or a long loop), browser worker thread is busy and your function will have to wait. Consider this code:

setTimeout(f, 500);
for(var i = 0; i < 10000000; ++i){
    //...
}

setTimeout returns immediately allowing the execution of the loop. If this loop runs for more than 500 milliseconds, it won’t be interrupted and your f function will have to wait. The same thing will occur if after e.g. 490 milliseconds you trigger some lengthy event handler.

Consider browser JS worker thread as a queue with a single consumer and multiple producers. Some items in the queue can be picked up immediately (like event handlers), some have to wait until their timeout expires.