Замествания за setInterval Използване на requestAnimationFrame - CSS-трикове

Що се отнася до анимацията, ни казват, че това setIntervalе лоша идея. Защото, например, цикълът ще се изпълнява независимо от нещо друго, което се случва, а не учтиво отстъпва, както requestAnimationFrameще. Също така някои браузъри могат да „играят догонване“ с цикъл setInterval, където неактивен раздел може да е поставял на опашка итерации и след това да ги изпълнява много бързо, за да навакса, когато стане отново активен.

Ако искате да използвате setInterval, но искате учтивостта на изпълнението requestAnimationFrame, Интернет има няколко опции!

От Сергей Шимански:

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

Вижте коментара за вариантите, като изчистване на интервала и настройка и изчистване на таймаутите.

Това беше вариант на версията на Джо Ламбърт:

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

Което е по-подробно отчасти, защото обработва префикса на доставчика. Много е вероятно да не се нуждаете от префикса на доставчика. Вижте поддръжката на браузъра за requestAnimationFrame. Ако трябва да поддържате IE 9 или Android 4.2-4.3, изобщо не можете да използвате това. Префиксът на доставчика помага само за доста стари версии на Safari и Firefox.

И още един от StackExchange:

window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start