Cuando se trata de animación, nos dicen que setIntervales una mala idea. Porque, por ejemplo, el ciclo se ejecutará independientemente de cualquier otra cosa que esté sucediendo, en lugar de ceder cortésmente como se requestAnimationFramequiere. Además, algunos navegadores pueden "ponerse al día" con un bucle setInterval, donde una pestaña inactiva podría haber estado en cola de iteraciones y luego ejecutarlas todas muy rápidamente para ponerse al día cuando se vuelva a activar.
Si desea usar setInterval, pero desea la cortesía en el desempeño requestAnimationFrame, ¡Internet tiene algunas opciones disponibles!
Desde 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; );Consulte el comentario para ver las variaciones, como borrar el intervalo y establecer y borrar tiempos de espera.
Esta fue una variación de la versión de 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); );Lo cual es más detallado en parte porque maneja los prefijos del proveedor. Es muy probable que no necesite el prefijo del proveedor. Consulte el soporte del navegador para requestAnimationFrame. Si necesita ser compatible con IE 9 o Android 4.2-4.3, no puede usarlo en absoluto. El prefijo del proveedor solo ayuda para versiones bastante antiguas de Safari y Firefox.
Y uno más de StackExchange:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start