Náhrady za setInterval Pomocí requestAnimationFrame - Triky CSS

Pokud jde o animaci, říká se nám, že setIntervalje to špatný nápad. Protože například smyčka poběží bez ohledu na to, co se děje, spíše než zdvořile podléhat requestAnimationFramevůli. Některé prohlížeče také mohou „přehrát catchup“ se smyčkou setInterval, kde neaktivní karta mohla řadit iterace do fronty a poté je všechny spustit velmi rychle, aby to dohnaly, když se opět stane aktivní.

Pokud chcete použít setInterval, ale chcete zdvořilost výkonu requestAnimationFrame, má internet k dispozici několik možností!

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

V komentáři najdete varianty, jako je vymazání intervalu a nastavení a vymazání časových limitů.

Jednalo se o variantu verze 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); );

Což je zčásti podrobnější, protože zpracovává předponu dodavatele. Je velmi pravděpodobné, že předponu dodavatele nepotřebujete. Viz podpora prohlížeče pro requestAnimationFrame. Pokud potřebujete podporovat IE 9 nebo Android 4.2-4.3, nemůžete to vůbec použít. Předpona dodavatele pomáhá pouze u docela starých verzí Safari a Firefox.

A ještě jedna ze StackExchange:

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