Detailed JavaScript advanced timer _javascript Tips

settimeout () and setinterval () can be used to create timers, whose basic usage is no longer introduced here. Here is a brief introduction to JavaScript code queues. No code in JavaScript is executed immediately and executes as soon as the process is idle. So the time set in the timer does not mean that the execution time will be consistent, but that the code will be added to the queue after the specified time interval to wait. If there is nothing else in the queue at this point in time, the code is executed, seemingly as if the code was executed at precisely specified point in time. So there are some problems that arise.

Repeat Timer

In general, we use the SetInterval method to repeatedly execute a piece of code at the same time interval. But there are two problems with this method: the first is that some intervals are skipped, and the second is that the interval between code execution for multiple timers may be smaller than expected.
Here, let's take an example: If an OnClick event handler uses SetInterval to set a repeat timer of 200ms intervals, if the event handler takes 300ms time to complete, it skips a time interval and runs a timer code.
We can also use the following code to get the conclusion:

Repeat 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
in order to avoid this time interval problem, we can use the chain call settimeout method to replace the setinterval.

//Can be used to replace setinterval
var i = 0 by chained call settimeout;
settimeout (function () {
 //processing content
 i++;
 for (Var j=0;j<100000000;j++) {}
 document.write (i+ ');
 settimeout (arguments.callee,100);
},100);
This treatment is significantly better.

Each time the function executes, a new timer is created, and the second settimeout call uses Arguments.callee to get a reference to the currently executing function and set another timer for it. This is done to not insert the new timer code into the queue until the previous timer code is executed, to ensure that there are no missing intervals, and to wait at least the specified interval before the next timer code executes, avoiding continuous running. Can be said to kill each other, now the mainstream frame of the animation is generally the way to achieve repeated timing.

function throttling

Timers are not just for timing, they can also be used to ease the pressure on the browser. Some calculations and processes in the browser are much more expensive than others, such as DOM operations, which require more memory and CPU time, and the continuous use of too many DOM operations may cause the browser to hang or even crash.
The basic idea of function throttling is that some code cannot be repeated continuously without interruption. The first time you call a function, you create a timer that runs the code after a specified interval. When the function is called the second time, it clears the previous timer and sets one. The purpose is to execute a function after a request has been stopped for a period of time.
The code is as follows:

Then we'll talk about function throttling functions
throttle (Method,context) {
 cleartimeout (method.tid);
 Method.tid = settimeout (function () {
  method.call (context);
 },100);
}
The function accepts two parameters, the first is the function to execute, and the second is the scope.
//Use method demo
//unused:
window.onresize = function () {
 var div = document.getelementbytagname (body);
 Div.style.height = div.offsetwidth + ' px ';
}
Use of;
function Resizediv () {
 var div = document.getelementbytagname (body);
 Div.style.height = div.offsetwidth + ' px ';
}
Window.onresize = function () {
 throttle (resizediv);
};
As long as the code is executed periodically, throttling should be used.

This gives the user the feeling is not very big, indeed is to the browser to reduce a lot of pressure, function throttling is also a lot of frameworks commonly used techniques.

The above is about the JavaScript Advanced timer related introduction, I hope to help you learn.