A setInterval helyettesítői a requestAnimationFrame - használatával CSS-trükkök

Az animációról azt mondják, hogy setIntervalez egy rossz ötlet. Mert például a hurok bármi mástól függetlenül futni fog, ahelyett, hogy udvariasan engedne, mint requestAnimationFrameakarat. Néhány böngésző előfordulhat, hogy egy setInterval ciklussal „játszik felzárkózást”, ahol egy inaktív lap esetleg sorban állta az iterációkat, majd nagyon gyorsan futtatta őket, hogy utolérjék, amikor újra aktívvá válik.

Ha használni setIntervalszeretné, de szeretné a teljesítmény udvariasságát requestAnimationFrame, az interneten elérhető néhány lehetőség!

Serguei Shimansky felől:

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

Lásd a megjegyzésben a variációkat, például az intervallum törlését, valamint az időkorlátok beállítását és törlését.

Ez Joe Lambert változatának változata volt:

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

Ami részben részletesebb, mert a szállító előtagját kezeli. Nagyon valószínű, hogy nincs szüksége az eladó előtagjára. Lásd a böngésző támogatását a requestAnimationFrame webhelyen. Ha támogatnia kell az IE 9 vagy az Android 4.2–4.3 rendszert, akkor ezt egyáltalán nem használhatja. A szállító előtagja csak a Safari és a Firefox meglehetősen régi verzióinál segít.

És még egy a StackExchange-től:

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