JS implements animation timer method

This article mainly shares with you the method of implementing animation timer in JS. Broadly speaking: all visual presentations changed through JS are called animations; for example, interactive feedback of buttons, links and other elements. , in a narrow sense: the visual animation effect produced by continuously calling js functions through timers to change element attributes.

Timer

Timer is the core technology of JavaScript animation;

setTimeout(), setInterval() are well known to everyone and were often used in the past. ;

Usually they do something auxiliary and icing on the cake;

Careful people may find a phenomenon that there is a loop animation when switching from other tabs The page will have freezes and rapid frame switching;

The problem lies in their inner operating mechanism;

Understand setTimeout

The first parameter It is recommended to use the function form, the string form will be parsed twice, and there is the same problem as eval;

There are more than two parameters, there can be more, see example 1;

This points to the problem, see example 2;

The return value is an integer;

clearTimeout(timer) cancels the timer;

setInterval ,clearInterval is the same as above;

Example 1:

setTimeout(function(a,b){ 
 console.log(a+b); 
},1000,1,1)；

Example 2:

var a = 0;
function foo(){
 console.log(this.a);
};
var obj = {
 a : 2,
 foo:foo
}
setTimeout(obj.foo,100);

Operation mechanism

Example:

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

Reason: Join the queue, blocking execution.

setTimeout legend:

setInterval legend:

##Existence is reasonable

Parent-child element event bubbling, the parent element needs to be executed first, see example 3;

User-defined callback function, usually triggered before the browser's default action, see example 4;

Example 3:

<p id="myp" style="height: 100px;width: 100px;background-color: pink;"></p>
<script>
myp.onclick = function(){
 setTimeout(function(){
  alert(0);
 })
}
document.onclick = function(){
 alert(1);
}
</script>

Example 4:

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
 setTimeout(function(){
  myInput.value = myInput.value.toUpperCase();
 });
}
</script>

Get to know requestAnimationFrame

Usage is similar to setTimeout, except that no time parameter is required;

The mechanism is completely different:

1, setTimeout is an asynchronous operation, joining the task queue (event loop), when the synchronization code in the js engine thread is executed, it will be taken out from the task queue for execution;

2, raf is an interface developed specifically for animation by the user agent (browser), the user agent will Update animation frames at an appropriate frequency (generally the same as the monitor refresh frequency, 1000/60ms), and stop frame updates on hidden or inactive pages to save CPU resources;

3, raf example

raf is simple and compatible

window.requestAnimFrame = (function(){ 
 return window.requestAnimationFrame || 
   window.webkitRequestAnimationFrame ||   
   window.mozRequestAnimationFrame || 
   function( callback ){  
    window.setTimeout(callback, 1000 / 60);
    };
  })();

Related recommendations:

JavaScript timer detailed explanation

In-depth JavaScript timer

Detailed analysis of Node timer

The above is the detailed content of JS implements animation timer method. For more information, please follow other related articles on the PHP Chinese website!