Ersetzungen für setInterval mit requestAnimationFrame

Wenn es um Animationen geht, wird uns gesagt, dass setInterval eine schlechte Idee ist. Denn zum Beispiel wird die Schleife unabhängig von allem anderen ausgeführt, anstatt wie requestAnimationFrame höflich nachzugeben. Außerdem könnten einige Browser mit einer setInterval-Schleife "aufholen", bei der ein inaktiver Tab Iterationen in die Warteschlange gestellt und dann alle sehr schnell ausgeführt hat, um aufzuholen, wenn er wieder aktiv wird.

Wenn Sie setInterval verwenden möchten, aber die Leistungshöflichkeit von requestAnimationFrame wünschen, gibt es im Internet einige Optionen!

Von 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;
};

Siehe den Kommentar für die Variationen, wie das Löschen des Intervalls und das Setzen und Löschen von Timeouts.

Dies war eine Variation von Joe Lamberts Version

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);
};

Welche wortreicher ist, unter anderem weil sie herstellerspezifische Präfixe behandelt. Es ist sehr wahrscheinlich, dass Sie die herstellerspezifischen Präfixe nicht benötigen. Sehen Sie die Browserunterstützung für requestAnimationFrame. Wenn Sie IE 9 oder Android 4.2-4.3 unterstützen müssen, können Sie dies überhaupt nicht verwenden. Die herstellerspezifischen Präfixe helfen nur für ziemlich alte Versionen von Safari und Firefox.

Und noch eine von 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 }
  }
}