Náhrady za setInterval Pomocou requestAnimationFrame - Triky CSS

Pokiaľ ide o animáciu, hovorí sa nám, že setIntervalje to zlý nápad. Pretože napríklad slučka pobeží bez ohľadu na čokoľvek iné, než sa zdvorilo poddá, ako requestAnimationFramebude. Niektoré prehliadače tiež môžu „hrať dohonenie“ so slučkou setInterval, kde neaktívna karta mohla čakať na iterácie vo fronte a potom ich všetky spustiť veľmi rýchlo, aby ich dobehla znova, keď bude znova aktívna.

Ak chcete používať setInterval, ale chcete mať zdvorilosť výkonu requestAnimationFrame, má internet k dispozícii niekoľko možností!

Od Sergeja Šimanského:

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; );

V komentári nájdete varianty, ako je vymazanie intervalu a nastavenie a vymazanie časových limitov.

Išlo o variáciu verzie Joe Lamberta:

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); );

Čo je čiastočne podrobnejšie, pretože sa zaoberá predponou dodávateľa. Je veľmi pravdepodobné, že nepotrebujete predponu dodávateľa. Pozrite si podporu prehľadávača pre requestAnimationFrame. Ak potrebujete podporovať IE 9 alebo Android 4.2-4.3, nemôžete ich vôbec používať. Predpona dodávateľa pomáha iba pre dosť staré verzie Safari a Firefox.

A ešte jedna zo StackExchange:

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