Penggantian untuk setInterval Menggunakan requestAnimationFrame - Trik CSS

Dalam hal animasi, kami diberitahu bahwa itu setIntervaladalah ide yang buruk. Karena, misalnya, loop akan berjalan terlepas dari apa pun yang terjadi, daripada dengan sopan menghasilkan requestAnimationFramekeinginan. Juga beberapa browser mungkin "bermain mengejar" dengan loop setInterval, di mana tab yang tidak aktif mungkin telah mengantri iterasi dan kemudian menjalankan semuanya dengan sangat cepat untuk mengejar ketertinggalan ketika menjadi aktif kembali.

Jika Anda ingin menggunakan setInterval, tetapi ingin kesopanan kinerja requestAnimationFrame, internet memiliki beberapa pilihan!

Dari Serguei Shimansky:

var requestInterval = function (fn, delay) ( var requestAnimFrame = (function () ( return window.requestAnimationFrame || function (callback, element) ( window.setTimeout(callback, 1000 / 60); ); ))(), start = new Date().getTime(), handle = (); function loop() ( handle.value = requestAnimFrame(loop); var current = new Date().getTime(), delta = current - start; if (delta >= delay) ( fn.call(); start = new Date().getTime(); ) ) handle.value = requestAnimFrame(loop); return handle; );

Lihat komentar untuk variasinya, seperti membersihkan interval, dan mengatur serta menghapus waktu tunggu.

Ini adalah variasi dari versi Joe Lambert:

window.requestInterval = function(fn, delay) ( if( !window.requestAnimationFrame && !window.webkitRequestAnimationFrame && !(window.mozRequestAnimationFrame && window.mozCancelRequestAnimationFrame) && // Firefox 5 ships without cancel support !window.oRequestAnimationFrame && !window.msRequestAnimationFrame) return window.setInterval(fn, delay); var start = new Date().getTime(), handle = new Object(); function loop() ( var current = new Date().getTime(), delta = current - start; if(delta >= delay) ( fn.call(); start = new Date().getTime(); ) handle.value = requestAnimFrame(loop); ); handle.value = requestAnimFrame(loop); return handle; ) window.clearRequestInterval = function(handle) ( window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) : window.webkitCancelAnimationFrame ? window.webkitCancelAnimationFrame(handle.value) : window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) : /* Support for legacy API */ window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) : window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) : window.msCancelRequestAnimationFrame ? window.msCancelRequestAnimationFrame(handle.value) : clearInterval(handle); );

Yang lebih bertele-tele karena menangani prefiks vendor. Kemungkinan besar Anda tidak memerlukan prefiks vendor. Lihat dukungan browser untuk requestAnimationFrame. Jika Anda perlu mendukung IE 9 atau Android 4.2-4.3, Anda tidak dapat menggunakan ini sama sekali. Awalan vendor hanya membantu untuk Safari dan Firefox versi lama.

Dan satu lagi dari StackExchange:

window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start