Ersetzungen für setInterval mit requestAnimationFrame - CSS-Tricks

Wenn es um Animation geht, wird uns gesagt, dass dies setIntervaleine schlechte Idee ist. Denn zum Beispiel wird die Schleife unabhängig von irgendetwas anderem laufen, anstatt höflich wie der requestAnimationFrameWille nachzugeben . Einige Browser spielen möglicherweise auch Catchup mit einer setInterval-Schleife, bei der ein inaktiver Tab möglicherweise Iterationen in die Warteschlange gestellt hat, und führen sie dann alle sehr schnell aus, um sie einzuholen, wenn sie wieder aktiv werden.

Wenn Sie verwenden setIntervalmöchten, aber die Leistungshöflichkeit von möchten requestAnimationFrame, stehen im Internet einige Optionen zur Verfügung!

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

Im Kommentar finden Sie Informationen zu Variationen wie Löschen des Intervalls sowie Festlegen und Löschen von Zeitüberschreitungen.

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

Was zum Teil ausführlicher ist, weil es sich um Herstellerpräfixe handelt. Es ist sehr wahrscheinlich, dass Sie das Herstellerpräfix nicht benötigen. Siehe 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. Das Herstellerpräfix hilft nur bei recht alten 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