今回は、H5 の timerrequestAnimationFrame の使い方についてのヒントをお届けします。H5 タイマー requestAnimationFrame を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。
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( '定时器代码' ); } );を設定する必要がない点が異なります。パラメータは
コールバック関数
で、戻り値はタイマー番号を表すために使用される整数です。nbsp;html> <meta> <meta> <meta> <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> <input> <input>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 メソッド:
nbsp;html> <meta> <meta> <meta> <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> <p>0%</p> <p><input></p>
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 メソッド
nbsp;html> <meta> <meta> <meta> <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> <p>0%</p> <p><input></p>読んでいただいたと思いますこのケースはすでにメソッドをマスターしています。さらにエキサイティングな情報については、php 中国語 Web サイトの他の関連記事にご注意ください。
推奨読書:
H5 でのドラッグ アンド ドロップの詳細な説明
以上がH5 タイマー requestAnimationFrame の使用上のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート:メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス:要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ:ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

Dreamweaver Mac版
ビジュアル Web 開発ツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ドリームウィーバー CS6
ビジュアル Web 開発ツール

ホットトピック









