Reemplazos para setInterval Usando requestAnimationFrame | Programar Plus

Cuando se trata de animación, nos dicen que setInterval es 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 requestAnimationFrame será. 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 utilizar setInterval, pero quiero la cortesía de desempeño de 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 conocer 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 de proveedores. Es muy probable que no necesite el prefijo de 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<delay||(start+=delay, callback());
      stop||requestAnimation(intervalFunc)
    }
  requestAnimation(intervalFunc);
  return {
    clear: function(){ stop=1 }
  }
}