Замене за сетИнтервал помоћу рекуестАниматионФраме - ЦСС-трикови

Што се тиче анимације, кажу нам да setIntervalје то лоша идеја. Јер, на пример, петља ће се покретати без обзира на било шта друго што се дешава, уместо да учтиво попушта као што requestAnimationFrameхоће. Такође неки прегледачи могу да „играју надокнаду“ помоћу петље сетИнтервал, где је неактивна картица можда имала итерације у реду, а затим их све врло брзо покреће да би их сустигла када поново постане активна.

Ако желите да користите 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); );

Што је делимично више речи јер обрађује префикс добављача. Вероватно вам није потребан предфикс добављача. Погледајте подршку за прегледач за рекуестАниматионФраме. Ако требате да подржите ИЕ 9 или Андроид 4.2-4.3, ово уопште не можете да користите. Префикс добављача помаже само за прилично старе верзије Сафарија и Фирефока.

И још један од СтацкЕкцханге:

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