Заміни для 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