Home > Article > Web Front-end > How to implement the progress bar function of h5 timer

How to implement the progress bar function of h5 timer

php中世界最好的语言Original: 2018-01-19 09:13:342347browse

This time I will bring you h5's timer How to implement the progress bar function, what are the precautions for h5's timer to implement the progress bar function , the following is a practical case, let’s take a look.

Before requestAnimationFrame appeared, we generally used setTimeout and setInterval. So why did html5 add a new requestAnimationFrame? What problem did it appear to solve?

Advantages and features:

1) requestAnimationFrame will concentrate all DOM operations in each frame, complete it in one redraw or reflow, and reflow The time interval between drawing or reflowing closely follows the refresh frequency of the browser

2) In hidden or invisible elements, requestAnimationFrame will not be redrawn or reflowed, which of course means less CPU , GPU and memory usage

3) requestAnimationFrame is an API provided by the browser specifically for animation. The browser will automatically optimize the method call at runtime, and if the page is not active, the animation will automatically Pause, effectively saving CPU overhead

In one sentence: this thing has high performance, will not freeze the screen, and automatically adjusts the frame rate according to different browsers. If you don’t understand it or don’t understand it, it doesn’t matter. This thing is related to the browser rendering principle. Let’s learn to use it first!

How to use requestAnimationFrame?

The usage method is similar to the timer setTimeout. The difference is that it does not need to set the time interval parameter

var timer = requestAnimationFrame( function(){
       console.log( &#39;定时器代码&#39; );
   } );

The parameter is a callback function, and the return value is an integer , used to represent the number of the timer.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var aInput = document.querySelectorAll( "input" ),
                timer = null;
            aInput[0].onclick = function(){
                timer = requestAnimationFrame( function say(){
                    console.log( 1 );
                    timer = requestAnimationFrame( say );
                } );
            };
            aInput[1].onclick = function(){
                cancelAnimationFrame( timer );
            }
        }
    </script>
</head>
<body>
    <input type="button" value="开启">
    <input type="button" value="关闭">
</body>
</html>

cancelAnimationFrame is used to close the timer

This method needs to handle compatibility:

Simple compatibility:

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

If the browser does not recognize AnimationFrame, use setTimeout for compatibility.

Use three different timers (setTimeout, setInterval, requestAnimationFrame) to implement the loading of a progress bar

I believe I have read these You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to implement the progress bar function of h5 timer

Related articles