Što se tiče animacije, kažu nam da setIntervalje to loša ideja. Jer, na primjer, petlja će se pokretati bez obzira na bilo što drugo što se događa, umjesto da pristojno popušta kao što requestAnimationFramehoće. Također neki preglednici mogu "igrati nadoknađivanje" s petljom setInterval, gdje je neaktivna kartica možda ponavljala redove u redoslijedu, a zatim ih sve pokrenula vrlo brzo kako bi ih sustigla kad ponovno postane aktivna.
Ako želite koristiti setInterval, ali želite ljubaznost izvedbe requestAnimationFrame, Internet ima nekoliko dostupnih opcija!
Od Sergeja Šimanskog:
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; );Pogledajte komentar za varijacije, poput brisanja intervala i postavljanja i brisanja vremenskih ograničenja.
Ovo je bila varijacija verzije Joea 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); );Što je dijelom više opširno jer se bavi prefiksom dobavljača. Vrlo je vjerojatno da vam nije potreban predfiks dobavljača. Pogledajte podršku za preglednik za requestAnimationFrame. Ako trebate podržati IE 9 ili Android 4.2-4.3, ovo uopće ne možete koristiti. Prefiks dobavljača pomaže samo za prilično stare verzije Safarija i Firefoxa.
I još jedan od StackExchangea:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start