ก่อนที่จะมีการร้องขอ FRAME เราใช้ SetTimeOut และ SetInterval ดังนั้นทำไม HTML5 จึงเพิ่มการร้องขอ FRAME ใหม่
ข้อดีและลักษณะ:1) RequestAnimationFrame จะให้ความสนใจกับการดำเนินงาน DOM ทั้งหมดในแต่ละเฟรมให้เสร็จสมบูรณ์ในการเขียนใหม่หรือส่งคืนหนึ่งครั้งและช่วงเวลาของการทาสีใหม่หรือการส่งคืนนั้นใกล้เคียงกับความถี่รีเฟรชของเบราว์เซอร์
2) ในองค์ประกอบที่ซ่อนอยู่หรือมองไม่เห็นการร้องขอ FRAME จะไม่ถอนใหม่หรือส่งคืนซึ่งหมายความว่ามีซีพียูน้อยลง GPU และการใช้หน่วยความจำ
3) RequestAnimationFrame เป็น API ที่จัดทำโดยเบราว์เซอร์โดยเฉพาะสำหรับภาพเคลื่อนไหว
ในคำหนึ่งสิ่งนี้สูงและจะไม่ติดอยู่และอัตราเฟรมจะถูกปรับโดยอัตโนมัติตามเบราว์เซอร์ที่แตกต่างกัน หากคุณไม่เข้าใจหรือเข้าใจมันไม่สำคัญ มาเรียนรู้ที่จะใช้ก่อน!
จะใช้วิธีการร้องขอ FRAME ได้อย่างไร?
วิธีการใช้งานนั้นคล้ายคลึงกับการตั้งค่าตัวจับเวลา
var timer = requestanimationFrame (function () {console.log ('รหัสตัวจับเวลา');});});พารามิเตอร์เป็นฟังก์ชันการเรียกกลับและค่าส่งคืนเป็นจำนวนเต็มซึ่งใช้เพื่อแสดงจำนวนของตัวจับเวลา
<! UAA -compatible content = ie = edge> <title> เอกสาร </title> <priscid> window.onload = function () {var ainput = document.queeryselectollll (อินพุต), timer = null; () {timer = requestanimationFrame (ฟังก์ชั่น say () {console.log (1); timer = requestanimationFrame (พูด);};}; ainput [1] .onclick = ฟังก์ชั่น () /สคริปต์> </head> <body> <อินพุต type = button value = open> <input type = button value = ปิด> </body> </html>CancelimationFrame ใช้เพื่อปิดตัวจับเวลา
วิธีนี้ต้องเข้ากันได้:
ความเข้ากันได้ง่าย ๆ :
window.requestanimframe = (function () {return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimation || func tion (โทรกลับ) {window.settimeout (โทรกลับ, 1,000 /60);};});หากเบราว์เซอร์ไม่รู้จักแอนิเมชั่นเฟรมให้ใช้ความเข้ากันได้ของ SettimeOut
ใช้ 3 ตัวจับเวลาที่แตกต่างกัน (settimeout, setInterval, requestanimationframe) เพื่อให้ได้การโหลดแถบความคืบหน้า
1. วิธีการ setInterval: <! UAA-compatible content = ide = edge> <title> เอกสาร </title> <style> div {width: 0px; 30px /40px 'Microsoft Yahei'; null, curwidth = 0, getStyle = function (obj, ชื่อ, ค่า) {ถ้า (obj.currentstyle) {return obj.currenttenle [name];} else {retcomputedstyle (obj, obj, false) [name];}}; OBTN 1000) {Obox <p> <อินพุตประเภท = ค่าปุ่ม = พร้อม! ประการที่สองวิธีการตั้งถิ่นฐาน <script> window.onload = function () {var obtn = document.QuerySelector (อินพุต), obox = document.QuerySelector (div), timer = null, getsty le = function (obj, ชื่อ, ค่า) {ถ้า (obj currenstyle) {return obj.currentstyle [name];} else {return getComputedStyle (obj, false) [ชื่อ];}; ; inerhtml = parseint (getStyle (obox, 'width')) /10 + '%'; สคริปต์> 3. วิธีการร้องขอ FRAME <! UAA-compatible content = ide = edge> <title> เอกสาร </title> <style> div {width: 0px; 30px /40px 'Microsoft Yahei'; null, curwidth = 0, getStyle = function (obj, ชื่อ, ค่า) {ถ้า (obj.currentstyle) {return obj.currenttenle [name];} else {retcomputedstyle (obj, obj, false) [name];}}; OBTN .OffSetWidth + 10 + 'PX'; > <อินพุตประเภท = ค่าปุ่ม = พร้อม!