A deep understanding of the advanced timer of javascript and a deep understanding of javascript

A deep understanding of the advanced timer of javascript and a deep understanding of javascript

SetTimeout () and setInterval () can be used to create a timer. The basic usage is not described here. This section mainly introduces the javascript code queue. No code in javascript is executed immediately. Once the process is idle, it is executed as soon as possible. Therefore, the time set in the timer does not mean that the execution time is consistent, but that the Code will be added to the queue after the specified time interval for waiting. If there are no other items in the queue at this time point, the code will be executed. On the surface, it seems that the code is executed at exactly the specified time point. So there will be some problems.

Repeat Timer

Generally, we use the setInterval method to repeatedly execute a code segment at the same time interval. However, there are two problems with this method: the first is that some intervals will be skipped; the second is that the interval between code execution of multiple timers may be smaller than expected.
Here, let's take an example: if an onclick event handler uses setInterval to set a ms interval repetition timer, if the event handler takes ms to complete, A timer code is run at the same time without a time interval.
We can also draw a conclusion through the following code:

// Repeated timer var I = 0; setInterval (function () {// if the event processing time is longer than the interval I ++; for (var j = 0; j <100000000; j ++) {} document. write (I + '') ;}, 100); // You can obviously feel the time interval is not equal

To avoid this time interval problem, we can useCall the setTimeout method in a chainTo replace setInterval.

// You can use setTimeout to replace setIntervalvar I = 0; setTimeout (function () {// process content I ++; for (var j = 0; j <100000000; j ++) {} document. write (I + ''); // setTimeout (arguments. callee, 100) ;}, 100); // The processing effect is much better.

Each time a function is executed, a new timer is created. The second setTimeout call uses arguments. callee to obtain reference to the currently executed function and set another timer for it. This is done so that no new timer code will be inserted into the queue before the previous timer code is executed, so that there will be no missing intervals, and before the next timer code is executed, at least wait for the specified interval to avoid continuous operation. It can be said that the animation in the mainstream frameworks is usually used in this way to achieve repeated timing.

Function throttling

The timer is not only used for timing, but also can be used to relieve the pressure on the browser. Some computing and processing operations in a browser are much more expensive than others. For example, DOM operations require more memory and CPU time. continuous use of too many DOM operations may cause browser suspension, even crash.
Function throttlingBasic IdeasYes,Some codes cannot be repeatedly executed without interruption.. Call the function for the first time, create a timer, and run the code after the specified interval. When this function is called for the second time, it clears the previous timer and sets one. The purpose is to stop the function execution after a period of time.
The Code is as follows:

// Let's Talk About the function throttle (method, context) {clearTimeout (method. tId); method. tId = setTimeout (function () {method. call (context) ;}, 100) ;}// this function accepts two parameters. The first parameter is the function to be executed, and the second parameter is the scope. // Usage demo // usage: window. onresize = function () {var div = document. getElementByTagName (body); div. style. height = div. offsetWidth + 'px ';} // usage; function resizeDiv () {var div = document. getElementByTagName (body); div. style. height = div. offsetWidth + 'px ';} window. onresize = function () {throttle (resizeDiv) ;}; // throttling should be used as long as the code is periodically executed.

In this way, the user does not feel a lot, but it does reduce the pressure on the browser. Function Throttling is also a common technique in many frameworks.

Demo location

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.