JavaScript Timer Working principle Analysis _javascript Skill

SetTimeout ()

The setTimeout definition of MDN is:

Calls a function or executes a code fragment after the specified delay time.

Grammar

The syntax for settimeout is very simple, the first parameter is a callback function, and the second parameter is the delay time. function returns an ID unique identifier for a numeric type that can be used as a cleartimeout parameter to cancel the timer:

var timeoutid = window.settimeout (code, delay);

Ie0+ also supports incoming callback parameters:

var Timeoutid = window.settimeout (func, delay, [param1, Param2, ...]);

SetInterval ()

MDN's definition of setinterval is:

Periodically call a function or execute a piece of code.

As SetInterval and settimeout are used, this is no longer listed here.

Description of the second parameter (delay)

Because of the event loop mechanism of JavaScript, the second parameter does not represent a delay delay milliseconds to execute the callback function immediately, but rather an attempt to join the callback function to the event queue. In fact, there is a difference between settimeout and setinterval at this point:

• SetTimeout: After the delay delay milliseconds, no matter what, the callback function is added directly to the event queue.
• SetInterval: After a delay of delay milliseconds, see if there are any callback functions that have not been executed in the event queue (the setinterval callback function), and if so, do not add a callback function to the event queue.

So, when there are time-consuming tasks in our code, timers do not behave as we think.

By an example to understand

The following code would have liked to call the callback function at 100ms and 200ms (that is, just waiting for 100ms):

var timerStart1 = Now ();
settimeout (function () {
 console.log (' first settimeout callback execution wait time: ', now ()-timerStart1);

 var timerStart2 = Now ();
 settimeout (function () {
  console.log (' second settimeout callback execution wait time: ', now ()-TIMERSTART2);
 };
Output:
//First settimeout callback execution wait time:
settimeout//second callback execution wait time: 107

The result seems to be what we think, but once we add a time-consuming task to the code, the result is not as we would have expected:

var timerStart1 = Now ();
settimeout (function () {
 console.log (' first settimeout callback execution wait time: ', now ()-timerStart1);

 var timerStart2 = Now ();
 settimeout (function () {
  console.log (' second settimeout callback execution wait time: ', now ()-TIMERSTART2);
 };

 Heavytask (); Time-consuming task
};

var loopstart = Now ();
Heavytask (); Time-consuming task
console.log (' Heavytask time consuming: ', now ()-loopstart);

function Heavytask () {
 var s = Now ();
 while (now ()-S < 1000) {
 }
}

function now () {return
 new Date ()
}
Output:
//Heavytask time consuming: 1015
//First settimeout callback execution wait time: 1018
//second settimeout callback execution wait time: 1000

Two settimeout waiting events are no longer 100ms due to time-consuming tasks! Let's describe what happened:

1. First, the first time-consuming task (Heavytask ()) begins execution, and it takes approximately 1000ms to complete.
2. Starting with the time-consuming task, over 100ms, the first settimeout callback function is expected to execute, and is added to the event queue, but the previous time-consuming task is not finished, so it waits in the queue until the time-consuming task finishes executing. So what we see in the results is that the first settimeout callback executes the wait time: 1018.
3. The first settimeout callback executes, and a second settimeout is opened, which is also the callback function that expects the delay to execute after 100ms. However, there is a time-consuming task in the first settimeout, and all of its plots, like the first timer, wait for 1000ms to begin execution.

You can use the following diagram to summarize:

One more example of setinterval:

var Intervalstart = Now ();
SetInterval (function () {
 console.log (' interval interval defines timer: ', now ()-Loopstart);
};

var loopstart = Now ();
Heavytask ();
Console.log (' Heavytask time consuming: ', now ()-loopstart);

function Heavytask () {
 var s = Now ();
 while (now ()-S < 1000) {
 }
}

function now () {return
 new Date ()
}
Output:
//Heavytask time consuming: 1013
//Interval time defined timer: 1016
//Interval time to define timer: 1123
// Interval time to define timer: 1224

For the above code, we expect to have a log every 100ms. The difference between settimeout and setinterval is that when the callback function is ready to be added to the event queue, it will determine if there are any uncommitted callbacks in the queue, and if so, it will not add a callback function to the queue. Otherwise, multiple callbacks will occur in parallel.

You can use the following diagram to summarize:

Summarize

The above is a brief analysis of the JavaScript timer execution principle, hoping to help us understand JavaScript more deeply. A description of the improper part of the article can be noted in the commentary.