Quando si tratta di animazione, ci viene detto che setIntervalè una cattiva idea. Perché, ad esempio, il ciclo verrà eseguito indipendentemente da qualsiasi altra cosa in corso, piuttosto che cedere educatamente come requestAnimationFramevolontà. Inoltre, alcuni browser potrebbero "riprodurre il recupero" con un ciclo setInterval, in cui una scheda inattiva potrebbe aver messo in coda le iterazioni e quindi eseguirle tutte molto rapidamente per recuperare quando diventa di nuovo attiva.
Se desideri utilizzare setInterval, ma desideri la gentilezza delle prestazioni requestAnimationFrame, Internet ha alcune opzioni disponibili!
Da 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; );Vedere il commento per le variazioni, come cancellare l'intervallo e impostare e cancellare i timeout.
Questa era una variazione della versione di 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); );Che è più prolisso in parte perché gestisce il prefisso del fornitore. È molto probabile che non sia necessario il prefisso del fornitore. Vedere il supporto del browser per requestAnimationFrame. Se è necessario supportare IE 9 o Android 4.2-4.3, non è possibile utilizzarlo affatto. Il prefisso del fornitore aiuta solo per versioni piuttosto vecchie di Safari e Firefox.
E un altro da StackExchange:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start