Замены для setInterval Использование requestAnimationFrame онлайн урок.


Когда дело доходит до анимации, нам говорят, чтоsetInterval- плохая идея. Потому что, например, цикл будет работать независимо от чего-то еще, а не вежливо уступать, какrequestAnimationFrame. Кроме того, некоторые браузеры могут «играть в catchup» с циклом 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<delay||(start+=delay, callback());
stop||requestAnimation(intervalFunc)
}
requestAnimation(intervalFunc);
return {
clear: function(){ stop=1 }
}
}