Ersättningar för setInterval med hjälp av requestAnimationFrame - CSS-tricks

När det gäller animering får vi veta att det setIntervalär en dålig idé. Eftersom slingan till exempel kommer att gå oavsett vad som helst som händer, snarare än att hövligt ge en requestAnimationFramevilja. Vissa webbläsare kan också "spela upp" med en setInterval-loop, där en inaktiv flik kan ha köat iterationer och sedan kör dem alla mycket snabbt för att komma ikapp när den blir aktiv igen.

Om du vill använda setInterval, men vill ha prestanda artighet av requestAnimationFrame, har internet några alternativ tillgängliga!

Från 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 för variationerna, som att rensa intervallet, och ställa in och rensa timeouts.

Detta var en variant av 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); );

Vilket är mer detaljerat delvis eftersom det hanterar leverantörsprefix. Det är mycket troligt att du inte behöver leverantörsprefixet. Se webbläsarsupport för requestAnimationFrame. Om du behöver stödja IE 9 eller Android 4.2-4.3 kan du inte använda det alls. Säljarprefixet hjälper bara till ganska gamla versioner av Safari och Firefox.

Och ytterligare en från StackExchange:

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