Erstatninger for setInterval ved hjelp av requestAnimationFrame - CSS-triks

Når det gjelder animasjon, blir vi fortalt at det setIntervaler en dårlig idé. Fordi for eksempel løkken vil løpe uavhengig av noe annet som skjer, i stedet for høflig å gi som requestAnimationFramevilje. Også noen nettlesere kan "spille innhenting" med en setInterval-løkke, der en inaktiv fane kan ha stått i kø i iterasjoner, og deretter kjørt dem alle veldig raskt for å ta igjen når den blir aktiv igjen.

Hvis du vil bruke setInterval, men ønsker ytelsen høflighet av requestAnimationFrame, har Internett noen tilgjengelige alternativer!

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

Se kommentaren for variasjonene, som å tømme intervallet, og sette og tømme tidsavbrudd.

Dette var en variant på Joe Lamberts versjon:

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

Noe som delvis er mer uttalt fordi det håndterer forhandlerprefiks. Det er veldig sannsynlig at du ikke trenger leverandørprefikset. Se nettleserstøtte for requestAnimationFrame. Hvis du trenger å støtte IE 9 eller Android 4.2-4.3, kan du ikke bruke dette i det hele tatt. Selgerprefikset hjelper bare for ganske gamle versjoner av Safari og Firefox.

Og en til fra StackExchange:

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