ホームページ > 記事 > ウェブフロントエンド > h5タイマーのプログレスバー機能の実装方法

h5タイマーのプログレスバー機能の実装方法

php中世界最好的语言オリジナル: 2018-01-19 09:13:342301ブラウズ

今回は、h5のタイマーのプログレスバー機能を実装する方法を紹介します。 h5のタイマーにプログレスバー機能を実装するための注意事項は何ですか？

requestAnimationFrame が登場する前は、一般に setTimeout と setInterval を使用していましたが、なぜ html5 で新しい requestAnimationFrame が追加されたのでしょうか?

利点と機能:

1) requestAnimationFrame は各フレーム内のすべての DOM 操作を集中させ、1 回の再描画またはリフローで完了します。再描画またはリフローの時間間隔はブラウザーの更新頻度に厳密に従います

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 中国語 Web サイトの他の関連記事に注目してください。