Când vine vorba de animație, ni se spune că setIntervaleste o idee proastă. Deoarece, de exemplu, bucla va rula indiferent de orice altceva care se întâmplă, mai degrabă decât să cedeze politicos ca o requestAnimationFramevoință. De asemenea, unele browsere ar putea „reda recuperarea” cu o buclă setInterval, în care o filă inactivă ar fi putut fi în așteptare iterații și apoi să le ruleze pe toate foarte repede pentru a le recupera atunci când devine din nou activă.
Dacă doriți să utilizați setInterval, dar doriți politețea performanței requestAnimationFrame, internetul are câteva opțiuni disponibile!
De la 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; );Consultați comentariul pentru variații, cum ar fi ștergerea intervalului și setarea și ștergerea expirărilor.
Aceasta a fost o variantă a versiunii lui 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); );Ceea ce este mai detaliat în parte, deoarece gestionează prefixarea furnizorului. Este foarte probabil să nu aveți nevoie de prefixarea furnizorului. Consultați asistența browserului pentru requestAnimationFrame. Dacă trebuie să acceptați IE 9 sau Android 4.2-4.3, nu puteți utiliza deloc acest lucru. Prefixarea furnizorului ajută doar pentru versiunile destul de vechi ale Safari și Firefox.
Și încă unul de la StackExchange:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start