Detailed explanation of how to create and use advanced timer example code in javascript

setTimeout() and setInterval() can be used to create timers, and their basic usage will not be introduced here. Here we mainly introduce the code queue of javascript. No code in JavaScript is executed immediately, it is executed as soon as the process is idle. Therefore, the time set in the timer does not mean that the execution time must match, but it means that the code will be added to the queue to wait after the specified time interval. If there is nothing else in the queue at this point in time, then this code will be executed, and it will appear as if the code was executed at the precisely specified point in time. So some problems will arise.

Repeat timer

Usually, we use the setInterval method to repeatedly execute a certain piece of code at the same time interval. But there are two problems with using this method: the first is that some intervals will be skipped; the second is that the interval between code executions for multiple timers may be smaller than expected.
Here, let’s give an example: If an onclick event handler uses setInterval to set a repeating timer with a 200ms interval, if the event handler takes 300ms to complete, a time interval will be skipped at the same time A timer code is running.
We can also get the conclusion through the following code:

//重复定时器
var i =0;
setInterval(function(){
 //如果事件处理时间长于间隔时间
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+&#39; &#39;);
},100);
//可以明显感觉到时间间隔不相等
为了避免这种时间间隔的问题，我们可以采用链式调用setTimeout方法来取代setInterval。

//可以采用链式调用setTimeout来取代setInterval
var i = 0;
setTimeout(function(){
 //处理内容
 i++;
 for(var j=0;j<100000000;j++){}
 document.write(i+&#39; &#39;);
 //
 setTimeout(arguments.callee,100);
},100);
//这样处理效果明显好多了。

A new timer will be created every time the function is executed, and the second setTimeout call uses Use arguments.callee to get a reference to the currently executing function and set another timer for it. This is done so that no new timer code will be inserted into the queue until the previous timer code is executed, ensuring that there will not be any missing intervals and that at least the specified time will be waited before the next timer code is executed. intervals to avoid continuous runs. It can be said that it kills two birds with one stone. Nowadays, animations in mainstream frameworks generally implement repeated timing in this way.

Function throttling

The timer is not only used for timing, but can also be used to relieve the pressure on the browser. Some calculations and processing in the 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 the browser to hang or even crash.
The basic idea of ​​function throttling is that certain codes cannot be executed continuously and repeatedly without interruption. The first time the function is called, a timer is created to run code after a specified interval. When the function is called a second time, it clears the previous timer and sets one. The purpose is to execute the function again after the request to execute the function stops for a period of time.
The code is as follows:

//再来谈谈函数节流
function throttle(method,context){
 clearTimeout(method.tId);
 method.tId = setTimeout(function(){
  method.call(context);
 },100);
}
//该函数接受两个参数，第一个是要执行的函数，第二个是作用域。
//使用方法demo
//未使用情况：
window.onresize = function(){
 var p = document.getElementByTagName(body);
 p.style.height = p.offsetWidth +'px';
}
//使用情况;
function resizep(){
 var p = document.getElementByTagName(body);
 p.style.height = p.offsetWidth +'px';
}
window.onresize = function(){
 throttle(resizep);
};
//只要代码是周期性执行的，都应该使用节流。

This does not give the user a great feeling, it does reduce a lot of pressure on the browser, and the function throttling is also a lot One of the techniques commonly used by frameworks.

The above is the detailed content of Detailed explanation of how to create and use advanced timer example code in javascript. For more information, please follow other related articles on the PHP Chinese website!