Detailed explanation of JavaScript timer

This time I will bring you a detailed explanation of Timer of JavaScript, Timer of using JavaScriptWhat are the precautions, as follows This is a practical case, let’s take a look at it.

In addition to placing events of asynchronous tasks, "Task Queue" can also place timed events, that is, specifying how long some code will be executed after. This is called the "Timer" (timer) function, which is code that is executed regularly.

The timer function is mainly completed by the two functions, setTimeout() and setInterval(). Their internal operating mechanisms are exactly the same. The difference is that the code specified by the former is executed once. The latter is executed repeatedly. The following mainly discusses setTimeout().

setTimeout() accepts two parameters, the first is the callback function, and the second is the number of milliseconds to delay execution.

console.log(1);setTimeout(function(){console.log(2);},1000);console.log(3);

The execution result of the above code is 1, 3, 2, because setTimeout() delays the execution of the second line until 1000 milliseconds later.

If the second parameter of setTimeout() is set to 0, it means that after the current code is executed (the execution stack is cleared), the specified callback function will be executed immediately (0 millisecond interval).

setTimeout(function(){console.log(1);}, 0);console.log(2);

The execution result of the above code is always 2, 1, because only After executing the second line, the system will execute the callback function in the "task queue".

In short, the meaning of setTimeout(fn,0) is to specify a task to be executed in the earliest available idle time of the main thread, that is, to be executed as early as possible. It adds an event at the end of the "task queue", so it will not be executed until the synchronization task and the existing events in the "task queue" have been processed.

The HTML5 standard stipulates that the minimum value (shortest interval) of the second parameter of setTimeout() shall not be less than 4 milliseconds. If it is lower than this value, it will automatically increase. Prior to this, older browsers set the minimum interval to 10 milliseconds. In addition, those DOM changes (especially those involving page re-rendering) are usually not executed immediately, but every 16 milliseconds. At this time, the effect of using requestAnimationFrame() is better than setTimeout().

It should be noted that setTimeout() only inserts the event into the "task queue". The main thread must wait until the current code (execution stack) is completed before the main thread executes the callback function it specifies. If the current code takes a long time, it may take a long time, so there is no way to guarantee that the callback function will be executed at the time specified by setTimeout().

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

Event Loop of JavaScript running mechanism

##Events and callback functions of JavaScript running mechanism

Task Queue of JavaScript Running Mechanism

The above is the detailed content of Detailed explanation of JavaScript timer. For more information, please follow other related articles on the PHP Chinese website!