Erstatninger for setInterval Brug af requestAnimationFrame - CSS-tricks

Når det kommer til animation, får vi at vide, at det setIntervaler en dårlig idé. Fordi for eksempel løkken vil køre uanset andet, der foregår i stedet for høfligt at give som requestAnimationFramevilje. Også nogle browsere kan "spille indhentning" med et setInterval-løkke, hvor en inaktiv fane muligvis har stået iterationer i kø, og derefter køre dem alle meget hurtigt for at indhente, når den bliver aktiv igen.

Hvis du gerne vil bruge setInterval, men ønsker ydeevne høflighed af requestAnimationFrame, har Internettet nogle tilgængelige muligheder!

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 variationerne, som f.eks. At rydde intervallet, og indstille og rydde timeouts.

Dette var en variation på Joe Lamberts version:

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

Hvilket er mere detaljeret, fordi det håndterer sælgerpræfikser. Det er meget sandsynligt, at du ikke har brug for sælgerpræfikset. Se browsersupport for anmodningAnimationFrame. Hvis du har brug for at understøtte IE 9 eller Android 4.2-4.3, kan du slet ikke bruge dette. Sælgerpræfikset hjælper kun til ganske gamle versioner af Safari og Firefox.

Og en mere fra StackExchange:

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