집 > 기사 > 웹 프론트엔드 > h5 타이머의 진행 표시줄 기능을 구현하는 방법

h5 타이머의 진행 표시줄 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-01-19 09:13:342355검색

이번에는 h5의 timer의 진행 표시줄 기능을 구현하는 방법을 보여 드리겠습니다. h5의 타이머에서 진행 표시줄 기능을 구현하기 위한 주의사항은 무엇인가요?

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

장점 및 특징:

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

2) 숨겨진 또는 리플로우 보이지 않는 요소인 requestAnimationFrame은 다시 그리거나 리플로우하지 않으므로 CPU, GPU 및 메모리 사용량이 줄어듭니다.

3) requestAnimationFrame은 브라우저에서 특별히 설계되었습니다. 애니메이션용으로 제공되는 API의 경우 브라우저는 런타임 중에 메서드 호출을 자동으로 최적화합니다. 페이지가 활성화되지 않으면 애니메이션이 자동으로 일시 중지되어 CPU 오버헤드를 효과적으로 절약합니다

한 문장으로 말하면: 이 제품은 성능이 뛰어나며 화면이 멈추고 프레임 속도는 다른 브라우저에 따라 자동으로 조정됩니다. 이해하지 못하거나 이해하지 못하더라도 상관없습니다. 이는 브라우저 렌더링 원리와 관련이 있습니다. 먼저 사용법을 배워봅시다!

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

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

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

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

<!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)을 사용하여 진행률 표시줄 로드를 구현합니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.