Detailed description of javascript advanced timer and javascript Timer

Detailed description of javascript advanced timer and javascript Timer

SetTimeout () and setInterval ()It can be used to create a timer. Its 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 use the setTimeout Method for chained call to 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.
The basic idea of function Throttling is that some Code 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.

This gives the user a little bit of experience, but reduces the pressure on the browser. Function Throttling is also one of the common techniques in many frameworks.

The above is an introduction to the javascript advanced timer, and I hope it will help you learn it.

Articles you may be interested in:

• How to call a Javascript timer to PASS Parameters
• When getting the focus, use the js timer to set the time to execute the action
• Javascript/Jquery-various implementation methods of simple Timer
• JavaScript timer details and examples
• Js timer setTimeout cannot call local variable solution
• Js timer usage (example)
• Js timer (executed once and repeatedly)
• Nodejs simple getting started tutorial (2): Timer
• Difference between the timer nextTick () and setImmediate () in node. js