H5 타이머 requestAnimationFrame 사용 팁-H5 튜토리얼-php.cn

이번에는 H5의 timerrequestAnimationFrame 사용 팁을 알려드리겠습니다. H5 타이머 requestAnimationFrame 사용 시 주의사항은 무엇인가요?

requestAnimationFrame이 등장하기 전에는 일반적으로 setTimeout과 setInterval을 사용했는데, html5에서 새로운 requestAnimationFrame을 추가한 이유는 무엇일까요?

장점 및 특징:

1) requestAnimationFrame은 각 프레임의 모든 DOM 작업에 집중하여 한 번의 다시 그리기 또는 리플로우로 완료하며, 다시 그리기 또는 리플로우 시간 간격이 빡빡합니다. 브라우저의 새로 고침 빈도를 따릅니다.

2) 숨겨진 요소나 보이지 않는 요소에서는 requestAnimationFrame이 다시 그리거나 리플로우되지 않습니다. 이는 물론 CPU, GPU 및 메모리 사용량이 적음을 의미합니다.

3) requestAnimationFrame은 애니메이션을 위해 특별히 브라우저에서 제공하는 API입니다. 브라우저는 자동으로 메소드 호출을 최적화합니다. 런타임 중에 페이지가 활성화되지 않으면 애니메이션이 자동으로 일시 중지되어 CPU 오버헤드를 효과적으로 절약합니다. 한마디로 말하면 이 제품의 성능은 높고 화면이 멈추지 않으며 프레임 속도가 다른 브라우저에 따라 자동으로 조정됩니다. 이해하지 못하더라도 상관없습니다. 이는 브라우저 렌더링 원리와 관련이 있습니다. 먼저 사용법을 배워봅시다!

requestAnimationFrame을 사용하는 방법은 무엇입니까?

사용법은 타이머 setTimeout과 유사합니다. 차이점은 시간 간격 매개변수를 설정할 필요가 없다는 점입니다.

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

로그인 후 복사

매개변수는

콜백 함수

이며 반환 값은 타이머 번호를 나타내는 데 사용되는 정수입니다.

<!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은 타이머를 닫는 데 사용됩니다.

이 메서드는 호환되어야 합니다.

간단한 호환성:

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

로그인 후 복사

브라우저가 AnimationFrame을 인식하지 못하는 경우 호환성을 위해 setTimeout을 사용하세요.

3가지 다른 타이머 사용(setTimeout, setInterval) , requestAnimationFrame)은 진행률 표시줄 로드를 구현합니다.

1. 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>

로그인 후 복사

2. setTimeout 메서드

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

로그인 후 복사

3. requestAnimationFrame 메서드

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

로그인 후 복사

믿습니다 당신은 이 사건을 읽었습니다 이미 방법을 마스터했습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!