優勢與特點：

1)requestAnimationFrame會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率

2)在隱藏或不可見的元素中，requestAnimationFrame將不會進行重繪或回流，這當然就意味著更少的CPU、GPU和內存使用量

3)requestAnimationFrame是由瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優化方法的調用，并且如果頁面不是激活狀態下的話，動畫會自動暫停，有效節省了CPU開銷

一句話就是：這玩意性能高，不會卡屏，根據不同的瀏覽器自動調整幀率。如果看不懂或者不理解，也沒有什么關系，這玩意跟瀏覽器渲染原理有關。我們先學會使用它！

如何使用requestAnimationFrame？

使用方式跟定時器setTimeout差不多，不同之處在于，他不需要設置時間間隔參數

var timer = requestAnimationFrame( function(){ console.log( 定時器代碼  } );

參數是一個回調函數，返回值是一個整數，用來表示定時器的編號.

 !DOCTYPE html  html  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）實現一個進度條的加載

一、setInterval方式：

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

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

三、requestAnimationFrame方式

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

以上就是html5制作新增的定時器requestAnimationFrame實戰進度條 的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。