SetInterval aizstājēji Izmantojot requestAnimationFrame - CSS-triki

Runājot par animāciju, mums tiek teikts, ka setIntervaltā ir slikta ideja. Jo, piemēram, cilpa darbosies neatkarīgi no tā, kas notiek, nevis pieklājīgi padosies kā requestAnimationFramegriba. Arī dažas pārlūkprogrammas var “atskaņot saķeri” ar setInterval cilpu, kur neaktīva cilne, iespējams, ir rindojusi atkārtojumus, un pēc tam tās visas palaist ļoti ātri, lai panāktu, kad tā atkal aktivizējas.

Ja vēlaties izmantot setInterval, bet vēlaties veiktspējas pieklājību requestAnimationFrame, internetā ir pieejamas dažas iespējas!

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

Skatiet komentārus par variācijām, piemēram, intervāla notīrīšanu un taimautu iestatīšanu un notīrīšanu.

Tas bija Džo Lamberta versijas variants:

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

Kas daļēji ir daudzdomīgāks, jo tas pārvalda piegādātāja prefiksus. Ļoti iespējams, ka jums nav nepieciešams pārdevēja prefikss. Skatiet pārlūka atbalstu, lai iegūtu pieprasījumuAnimationFrame. Ja jums ir jāatbalsta IE 9 vai Android 4.2–4.3, jūs to nevarat izmantot vispār. Pārdevēja prefikss palīdz tikai diezgan vecām Safari un Firefox versijām.

Un vēl viens no StackExchange:

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