Home > Article > Web Front-end > HTML5 creates a new timer requestAnimationFrame actual progress bar

HTML5 creates a new timer requestAnimationFrame actual progress bar

一个新手Original: 2018-05-15 17:26:262310browse

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 and complete them in one redraw or reflow, and redraw or reflow The time interval closely follows the browser's refresh frequency

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 during runtime, and if the page is not active, the animation will automatically pause, effectively Saves 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. Indicates the number of the timer.

<!DOCTYPE html>
<html>
<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 you browse 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

1. setInterval method:

<!DOCTYPE html>
<html>
<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>
    <style>
        p{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px &#39;微软雅黑&#39;;
            color:white;
        }
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "p" ),
                timer = null, curWidth = 0,
                getStyle = function( obj, name, value ){
                    if( obj.currentStyle ) {
                        return obj.currentStyle[name];
                    }else {
                        return getComputedStyle( obj, false )[name];
                    }
                };
            oBtn.onclick = function(){
                clearInterval( timer );
                oBox.style.width = &#39;0&#39;;
                timer = setInterval( function(){
                    curWidth = parseInt( getStyle( oBox, &#39;width&#39; ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + &#39;px&#39;;
                        oBox.innerHTML = parseInt( getStyle( oBox, &#39;width&#39; ) ) / 10 + &#39;%&#39;;
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>
</head>
<body>
    <p>0%</p>
    <p><input type="button" value="ready!Go"></p>
</body>
</html>

#2. setTimeout method

<script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "p" ),
                timer = null, curWidth = 0,
                getStyle = function( obj, name, value ){
                    if( obj.currentStyle ) {
                        return obj.currentStyle[name];
                    }else {
                        return getComputedStyle( obj, false )[name];
                    }
                };
            oBtn.onclick = function(){
                clearTimeout( timer );
                oBox.style.width = &#39;0&#39;;
                timer = setTimeout( function go(){
                    curWidth = parseInt( getStyle( oBox, &#39;width&#39; ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + &#39;px&#39;;
                        oBox.innerHTML = parseInt( getStyle( oBox, &#39;width&#39; ) ) / 10 + &#39;%&#39;;
                        timer = setTimeout( go, 1000 / 60 );
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>

3. requestAnimationFrame method

<!DOCTYPE html>
<html>
<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>
    <style>
        p{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px &#39;微软雅黑&#39;;
            color:white;
        }
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "p" ),
                timer = null, curWidth = 0,
                getStyle = function( obj, name, value ){
                    if( obj.currentStyle ) {
                        return obj.currentStyle[name];
                    }else {
                        return getComputedStyle( obj, false )[name];
                    }
                };
            oBtn.onclick = function(){
                cancelAnimationFrame( timer );
                oBox.style.width = &#39;0&#39;;
                timer = requestAnimationFrame( function go(){
                    curWidth = parseInt( getStyle( oBox, &#39;width&#39; ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + &#39;px&#39;;
                        oBox.innerHTML = parseInt( getStyle( oBox, &#39;width&#39; ) ) / 10 + &#39;%&#39;;
                        timer = requestAnimationFrame( go );
                    }else {
                        cancelAnimationFrame( timer );
                    }
                } );
            }
        }
    </script>
</head>
<body>
    <p>0%</p>
    <p><input type="button" value="ready!Go"></p>
</body>
</html>

The above is the detailed content of HTML5 creates a new timer requestAnimationFrame actual progress bar. For more information, please follow other related articles on the PHP Chinese website!

html5 回调函数 dom

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to get the current coordinates of the mouse in real timeNext article：How to get the current coordinates of the mouse in real time

See more

HTML5 creates a new timer requestAnimationFrame actual progress bar

Related articles