javascript

Chapter 18: Advanced Techniques
Consider the following code:
var btn = document.getElementById(“my-btn”);
btn.onclick = function(){
setTimeout(function(){
document.getElementById(“message”).style.visibility = “visible”;
}, 250);
};
//other code
Here, an event handler is set up for a button. The event handler sets a timer to be called in 250
milliseconds. When the button is clicked, the onclick event handler is first added to the queue. When it
is executed, the timer is set, and 250 milliseconds later, the specified code is added to the queue for
execution. In effect, the call to setTimeout() says that some code should be executed later.
The most important thing to remember about timers is that the specified interval indicates when the
timer ’ s code will be added to the queue, not when the code will actually be executed. If the onclick
event handler in the previous example took 300 milliseconds to execute, then the timer ’ s code would
execute, at the earliest, 300 milliseconds after the timer was set. All code in the queue must wait until the
JavaScript process is free before it can be executed, regardless of how it was added to the queue. See
Figure 18 - 2 .
JavaScript Process Timeline
onclick
timer code
Idle
0
100 200
300 400 500
600 700 800
255
Timer code added to queue
5
Timer created with interval of 250
Figure 18 - 2
As you can see from Figure 18 - 2 , even though the timer code was added at the 255 - millisecond mark, it
cannot be executed at that time because the onclick event handler is still running. The timer code ’ s
first opportunity to be executed is at the 300 - millisecond mark, after the onclick event handler has
finished.
599