Conseils d'utilisation de la demande de minuterie H5AnimationFrame-Tutoriel H5-php.cn

Cette fois, je vais vous apporter des conseils sur l'utilisation du timerrequestAnimationFrame de H5, et quelles sont les précautions lors de l'utilisation du timer H5 requestAnimationFrame Voici un cas pratique, jetons un coup d'oeil.

Avant l'apparition de requestAnimationFrame, nous utilisions généralement setTimeout et setInterval. Alors pourquoi html5 a-t-il ajouté un nouveau requestAnimationFrame ?

Avantages et fonctionnalités :

1) requestAnimationFrame concentrera toutes les opérations DOM dans chaque image, elle est complétée en un redessin ou une redistribution, et l'intervalle de temps de redessin ou de redistribution suit de près la fréquence de rafraîchissement du navigateur

2) Dans les éléments cachés ou invisibles, requestAnimationFrame ne sera pas redessiné ou redistribué, ce qui signifie bien sûr moins de CPU, Utilisation du GPU et de la mémoire

3) requestAnimationFrame est une API fournie par le navigateur spécifiquement pour l'animation. Le navigateur optimisera automatiquement l'appel de méthode au moment de l'exécution. Et si la page n'est pas active, l'animation se mettra automatiquement en pause, de manière efficace. économiser la surcharge du processeur

En une phrase : cette chose a des performances élevées, ne gèlera pas l'écran et ajuste automatiquement la fréquence d'images en fonction des différents navigateurs. Si vous ne le comprenez pas ou ne le comprenez pas, cela n'a pas d'importance. Cette chose est liée au principe de rendu du navigateur. Apprenons d’abord à l’utiliser !

Comment utiliser requestAnimationFrame ?

est utilisé de la même manière que le timer setTimeout. La différence est qu'il n'est pas nécessaire de définir le paramètre d'intervalle de temps

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

Copier après la connexion

Le paramètre est une fonction de rappel. , et la valeur de retour est Un entier utilisé pour représenter le numéro du minuteur

<!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>

Copier après la connexion

cancelAnimationFrame est utilisé pour fermer le minuteur

Cette méthode doit gérer la compatibilité :

Compatibilité simple :

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

Copier après la connexion

Si le navigateur ne reconnaît pas AnimationFrame, utilisez setTimeout pour la compatibilité.

Utilisez 3 timers différents (setTimeout, setInterval, requestAnimationFrame) pour implémenter le chargement d'un barre de progression

1. Méthode setInterval :

<!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>
    <style>
        p{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px '微软雅黑';
            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 = '0';
                timer = setInterval( function(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>
</head>
<body>
    <p>0%</p>
    <p><input type="button" value="ready!Go"></p>
</body>
</html>

Copier après la connexion

<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 = '0';
                timer = setTimeout( function go(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                        timer = setTimeout( go, 1000 / 60 );
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>

Copier après la connexion

3. Méthode requestAnimationFrame

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site Web PHP chinois !

 <!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>
    <style>
        p{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px '微软雅黑';
            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 = '0';
                timer = requestAnimationFrame( function go(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                        timer = requestAnimationFrame( go );
                    }else {
                        cancelAnimationFrame( timer );
                    }
                } );
            }
        }
    </script>
</head>
<body>
    <p>0%</p>
    <p><input type="button" value="ready!Go"></p>
</body>
</html>

Copier après la connexion

Lecture recommandée :

Explication détaillée du glisser-déposer dans H5

Utiliser le canevas pour obtenir l'effet de barrage dans les vidéos

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!