紹介された
タイマーは常にJavaScriptアニメーションのコアテクノロジーでした。アニメーションループを作成するための鍵は、遅延が適切な期間を知ることです。一方では、異なるアニメーション効果が滑らかで滑らかに見えるように、ループ間隔は十分に短くなければなりません。一方、ブラウザが変更できるように、ループ間隔は十分に長くなければなりません。
ほとんどのコンピューターモニターの更新周波数は60Hzで、これは毎秒60回を補充するのとほぼ同等です。ほとんどのブラウザは、その頻度を超えても、ユーザーエクスペリエンスが改善されないため、モニターの再描画頻度を超えないように再描画操作を制限します。したがって、最もスムーズなアニメーションの最適なループ間隔は1000ms/60で、これはほぼ16.6msに等しい
そして、SettimeOutとSetIntervalの問題は、どちらも正確ではないということです。それらの固有の実行メカニズムは、時間間隔パラメーターが実際にブラウザUIスレッドキューにアニメーションコードを追加する時間を指定して実行を待つことを決定します。他のタスクがキューに追加された場合、アニメーションコードは、実行する前に以前のタスクが完了するまで待機する必要があります。
RequestAnimationFrameは、システムの時間間隔を使用して最良の描画効率を維持し、間隔時間が短いため、オーバーヘッドが増加するため、rawしすぎません。また、インターバル時間が長すぎるため、アニメーションの使用が詰まって滑らかではないため、さまざまなWebアニメーション効果が統一された更新メカニズムを備え、システムリソースを節約し、システムのパフォーマンスを改善し、視覚効果を改善できるようにすることもできません。
特徴
【1 requestAnimationFrameは、各フレームにすべてのDOM操作を集中し、単一の塗り直しまたはリフローに完全になります。
【2】非表示または目に見えない要素では、RequestAnimationFrameは塗り直されたり、反射したりしません。
【3】RequestAnimationFrameは、アニメーション専用にブラウザによって提供されるAPIです。実行すると、ブラウザはメソッドの呼び出しを自動的に最適化します。ページがアクティブになっていない場合、アニメーションは自動的に一時停止し、CPUオーバーヘッドを効果的に保存します
使用
RequestAnimationFrameの使用は、時間間隔を設定する必要がないことを除いて、SetimeOutと非常に似ています。 RequestAnimationFrameは、コールバック関数をパラメーターとして使用します。パラメーターは、ブラウザの塗装の前に呼び出されます。タイマーの数を表す整数を返します。これは、この関数の実行をキャンセルするためにCancelAnimationFrameに渡すことができます
requestId = requestAnimationFrame（callback）; //コンソール出力1および0VARタイマー= requestAnimationFrame（function（）{console.log（0）;}）; console.log（タイマー）; // 1 cancelanimationframeメソッドはタイマーをキャンセルするために使用されますCancelAnimationFrame（タイマー）;また、返品値を使用して直接キャンセルすることもできます
var timer = requestanimationframe（function（）{console.log（0）;}）; CancelAnimationFrame（1）;互換性がある
IE9-O-Browserはこの方法をサポートしていません。SettimeOutを使用して互換性
if（！window.requestanimationframe）{var lasttime = 0; window.requestanimationframe = function（callback）{var currime = new date（）。 TimeTocall）;}、TimetoCall）; LastTime = Currime + TimetoCall; return id;}} if（！window.cancelanimationframe）{window.cancelanimationframe = function（id）{cleartimeout（id）;};}応用
次に、SetInterval、Setimeout、およびRequestAnimationFrameの3つの方法を使用して、簡単なシステム効果を作成します。
【1】Intervalをセット
<div id = "mydiv" style = "background-color：lightblue; width：0; height：height：20px; line-height：20px;"> 0％</div> <button id = "btn"> run </button> <scrip> varタイマー; setInterval（function（）{if（parseint（mydiv.style.width）<500）{mydiv.style.width = parseint（mydiv.style.width） + 5 + 'px'; mydiv.innerhtml = parseint（mydiv.style.style.width） }、16）;} </script>【2】settimeout
<div id = "mydiv" style = "background-color：lightblue; width：0; height：height：20px; line-height：20px;"> 0％</div> <button id = "btn"> run </button> <scrip> varタイマー; fn（）{if（parseint（mydiv.style.width）<500）{mydiv.style.width = parseint（mydiv.style.width） + 5 + 'px'; mydiv.innerhtml = parseint（mydiv.style.width）/5 + '％'; setimeout（fn、16）;} else {cleartimeout（タイマー）;}}、16）;} </script>【3】RequestAnimationFrame
<div id = "mydiv" style = "background-color：lightblue; width：0; height：height：20px; line-height：20px;"> 0％</div> <button id = "btn"> run </button> <scrip> varタイマー; requestAnimationFrame（function fn（）{if（parseint（mydiv.style.width）<500）{mydiv.style.width = parseint（mydiv.style.width） + 'px'; mydiv.innerhtml = parseint（mydiv.style.width） RequestAnimationFrame（fn）;} else {cancelanimationFrame（Timer）;}}）;} </script>さて、コードはBOMシリーズに3番目のタイマーアプリケーションを導入するためにここにあります（時計、カウントダウン、ストップウォッチ、目覚まし時計）
上記は、編集者が紹介したBOMシリーズの2番目のタイマーrequestAnimationFrameです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！