There are two (mostly used) types of timer functions in javascript setTimeout and setInterval ( others )
Both of these methods have the same signature. They take a callback function and a delay time as a parameter.
setTimeout is only executed once after a delay, while setInterval continues to call the callback function after each milisecs delay.
both of these methods return an integer identifier that can be used to clear them before the timer expires.
clearTimeout and clearInterval both of these methods accept the integer identifier returned from the above setTimeout and setInterval functions
Example:
Settimeout
alert("before setTimeout"); setTimeout(function(){ alert("I am setTimeout"); },1000);
If you run the code above, you will see that it warns before setTimeout and then, after setTimeout finally, it warns I am setTimeout after 1 second (1000 ms)
From this example, you can notice that setTimeout(...) is asynchronous, which means that it does not wait for the timer to expire before moving on to the next expression, i.e. alert("after setTimeout");
Example:
setInterval
alert("before setInterval"); //called first var tid = setInterval(function(){ //called 5 times each time after one second //before getting cleared by below timeout. alert("I am setInterval"); },1000); //delay is in milliseconds alert("after setInterval"); //called second setTimeout(function(){ clearInterval(tid); //clear above interval after 5 seconds },5000);
If you run the code above, you will see that it warns before setInterval and then, after setInterval finally, it warns I am setInterval 5 times after 1 s (1000 ms), because setTimeout clears the timer after 5 seconds, otherwise every 1 second you will be warned I am setInterval Endlessly.
How does the internal browser do this?
I will explain briefly.
To understand what you need to know about the event queue in JavaScript. The browser implements an event queue. Whenever an event is fired in js, all of these events (e.g. click, etc.) are added to this queue. When your browser has nothing to execute, it takes an event from the queue and executes them one after another.
Now, when you call setTimeout or setInterval your callback is registered by the timer in the browser, and it is added to the event queue after a specified time, and finally javascript takes the event from the queue and executes it.
This is because the javascript engine is single-threaded and can only do one thing at a time. Thus, they cannot execute other JavaScript and track your timer. This is why these timers are registered in the browser (the browser is not single-threaded), and it can monitor the timer and add the event to the queue after the timer expires.
the same thing happens for setInterval only in this case, the event is added to the queue again and again at the specified interval until it is cleared or the browser page is updated.
The note
The delay parameter that you pass to these functions is the minimum delay time for making a callback. This is because after the timer expires, the browser adds the event to the queue, which will be executed by the javascript engine, but the execution of the callback depends on your position of the events in the queue, and since the mechanism is single-threaded, it will execute all events in the queue in turn .
Therefore, your callback can sometimes require more than the specified delay time to be called specifically when your other code blocks the thread and does not give it time to process what is in the queue.
And, as I mentioned, javascript is a single thread. So if you block the thread for a long time.
Like this code
while(true) { //infinite loop }
Your user may receive a message that the page is not responding .