BOM series The second piece of timer Requestanimationframe_javascript tips

Introduced

Timers have always been the core technology of JavaScript animation. The key to writing an animation loop is to know how long the delay is appropriate. On the one hand, the cycle interval must be short enough to allow different animation effects to appear smooth, on the other hand, the cycle interval is long enough to ensure that the browser has the ability to render the resulting changes

Most computer monitors have a refresh rate of 60Hz, which is roughly equivalent to redrawing 60 times per second. Most browsers limit the redraw operation to no more than the redraw frequency of the display, because even more than that frequency the user experience will not improve. Therefore, the optimal cycle interval for the smoothest animation is LOOOMS/60, which is approximately equal to 16.6ms

The problem with settimeout and setinterval is that they are imprecise. Their intrinsic operating mechanism determines that the time interval parameter actually only specifies the time when the animation code is added to the browser UI thread queue to wait for execution. If the queue is already in front of other tasks, the animation code waits until the previous task completes

Requestanimationframe using the system time interval, to maintain the best rendering efficiency, not because the interval is too short, resulting in excessive drawing, increase overhead; also not because of the interval time is too long, the use of animation cotton not fluent, so that a variety of Web page animation effect can have a unified refresh mechanism, Thus saving system resources, improving system performance and improving visual effect

Characteristics

The "1" requestanimationframe all the DOM operations in each frame, completes in one redraw or reflow, and the redraw or reflow time interval closely follows the browser's refresh rate.

"2" in hidden or invisible elements, requestanimationframe will not redraw or reflow, which of course means less cpu,gpu and memory usage

The "3" Requestanimationframe is an API specifically provided by the browser for animations, and the browser automatically optimizes the method's invocation at runtime, and if the page is not activated, the animation pauses automatically, effectively saving CPU overhead

Use

The use of Requestanimationframe is similar to settimeout, except that you don't need to set a time interval. Requestanimationframe uses a callback function as a parameter, which is invoked before the browser is redrawn. It returns an integer that represents the number of the timer, which can be passed to Cancelanimationframe to cancel the execution of this function

RequestID = Requestanimationframe (callback); 
Console output 1 and 0
var timer = requestanimationframe (function () {
console.log (0);
}); 
Console.log (timer);//1 
Cancelanimationframe method is used to cancel the timer
//console output
var timer = Requestanimationframe ( function () {
console.log (0);
}); 

You can also cancel using the return value directly

var timer = requestanimationframe (function () {
console.log (0);
}); 

Compatible

ie9-Browser does not support this method, you can use SetTimeout to compatible

if (!window.requestanimationframe) {
var lasttime = 0;
Window.requestanimationframe = function (callback) {
var currtime = new Date (). GetTime ();
var timetocall = Math.max (0,16.7-(Currtime-lasttime));
var id = window.settimeout (function () {
callback (currtime + timetocall);
},timetocall);
Lasttime = Currtime + timetocall;
return ID;
}
} 
if (!window.cancelanimationframe) {
window.cancelanimationframe = function (id) {
cleartimeout (ID);

Application

Now use the three methods of SetInterval, settimeout and requestanimationframe to make a simple system effect

"1" setinterval

<div id= "mydiv" style= "background-color:lightblue;width:0;height:20px;line-height:20px;" >0%</div>
<button id= "btn" >run</button>
<script>
var timer;
Btn.onclick = function () {
clearinterval (timer);
MyDiv.style.width = ' 0 ';
Timer = setinterval (function () {
if (parseint (MyDiv.style.width) <) {
myDiv.style.width = parseint ( MyDiv.style.width) + 5 + ' px ';
mydiv.innerhtml = parseint (myDiv.style.width)/5 + '% '; 
} else{
clearinterval (timer);
} 
},16);

"2" settimeout

<div id= "mydiv" style= "background-color:lightblue;width:0;height:20px;line-height:20px;" >0%</div>
<button id= "btn" >run</button>
<script>
var timer;
Btn.onclick = function () {
cleartimeout (timer);
MyDiv.style.width = ' 0 ';
Timer = settimeout (function fn () {
if (parseint (MyDiv.style.width) <) {
myDiv.style.width = parseint ( MyDiv.style.width) + 5 + ' px ';
mydiv.innerhtml = parseint (myDiv.style.width)/5 + '% ';
Timer = settimeout (fn,16);
} else{
cleartimeout (timer);
} 
},16);

"3" Requestanimationframe

<div id= "mydiv" style= "background-color:lightblue;width:0;height:20px;line-height:20px;" >0%</div>
<button id= "btn" >run</button>
<script>
var timer;
Btn.onclick = function () {
myDiv.style.width = ' 0 ';
Cancelanimationframe (timer);
Timer = Requestanimationframe (function fn () {
if (parseint (MyDiv.style.width) <) {
MyDiv.style.width = parseint (MyDiv.style.width) + 5 + ' px ';
mydiv.innerhtml = parseint (myDiv.style.width)/5 + '% ';
Timer = Requestanimationframe (FN);
} else{
cancelanimationframe (timer);
} 
);

Well, the code to this introduction, the following to introduce the BOM series of the third timer application (clock, Countdown, stopwatch and alarm clock)

The above mentioned is small set to introduce the BOM series of the second part of the timer requestanimationframe, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!