Als het op animatie aankomt, wordt ons verteld dat setIntervaldit een slecht idee is. Omdat, bijvoorbeeld, de lus zal lopen ongeacht wat er verder gebeurt, in plaats van beleefd over te geven zoals requestAnimationFramewil. Ook kunnen sommige browsers catchup spelen met een setInterval-lus, waarbij een inactief tabblad iteraties in de wachtrij kan hebben staan en ze dan allemaal heel snel uitvoeren om in te halen wanneer het weer actief wordt.
Als je het wilt gebruiken setInterval, maar de prestatiebeleefdheid van wilt requestAnimationFrame, heeft internet een aantal opties beschikbaar!
Van 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; );Zie de opmerking voor de variaties, zoals het wissen van het interval en het instellen en wissen van time-outs.
Dit was een variatie op de versie van 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); );Dat is gedeeltelijk meer uitgebreid omdat het voorvoegsels van leveranciers afhandelt. Het is zeer waarschijnlijk dat u de prefix van de leverancier niet nodig heeft. Zie browserondersteuning voor requestAnimationFrame. Als u IE 9 of Android 4.2-4.3 moet ondersteunen, kunt u dit helemaal niet gebruiken. Het voorvoegsel van de leverancier helpt alleen voor vrij oude versies van Safari en Firefox.
En nog een van StackExchange:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start