Penggantian untuk setInterval Menggunakan requestAnimationFrame - Trik CSS

Ketika datang ke animasi, kita diberitahu bahawa itu setIntervaladalah idea yang tidak baik. Kerana, sebagai contoh, gelung akan berjalan tanpa menghiraukan perkara lain yang berlaku, dan bukannya dengan sopan menghasilkan requestAnimationFramekehendak seperti itu. Juga beberapa penyemak imbas mungkin "mainkan tangkapan" dengan gelung setInterval, di mana tab yang tidak aktif mungkin mengulangi lelaran dan kemudian jalankan semuanya dengan cepat untuk mengejar apabila ia kembali aktif.

Sekiranya anda ingin menggunakan setInterval, tetapi ingin kesopanan prestasi requestAnimationFrame, internet mempunyai 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 komen untuk variasinya, seperti membersihkan selang waktu, dan menetapkan dan mengosongkan waktu tunggu.

Ini adalah variasi pada 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 verbose sebahagiannya kerana menangani awalan vendor. Kemungkinan besar anda tidak memerlukan awalan vendor. Lihat sokongan penyemak imbas untuk requestAnimationFrame. Sekiranya anda perlu menyokong IE 9 atau Android 4.2-4.3, anda tidak dapat menggunakannya sama sekali. Awalan vendor hanya membantu untuk versi lama Safari dan Firefox.

Dan satu lagi dari StackExchange:

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