Animatsiooni osas öeldakse meile, et setIntervalsee on halb mõte. Sest näiteks silmus kulgeb hoolimata kõigest muust, selle asemel, et viisakalt requestAnimationFrametahet anda. Samuti võivad mõned brauserid „mängida järelejõudmist” setIntervali tsükliga, kus mitteaktiivne vahekaart võis olla iteratsioonide järjekorras ja seejärel neid kõiki kiiresti käivitamiseks kiiresti käivitada.
Kui soovite kasutada setInterval, kuid soovite viisakust requestAnimationFrame, on Internetil mõned võimalused saadaval!
Serguei Shimansky käest:
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; );Vaadake variatsioonide kommentaari, näiteks intervalli tühjendamine ning ajalõppude seadmine ja kustutamine.
See oli Joe Lamberti versiooni variatsioon:
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); );Mis on osaliselt üksikasjalikum, kuna see tegeleb müüja eesliitega. On väga tõenäoline, et te ei vaja müüja eesliiteid. Vaadake brauseri tugiteenust requestAnimationFrame. Kui peate toetama IE 9 või Android 4.2–4.3, ei saa te seda üldse kasutada. Müüja eesliide aitab ainult Safari ja Firefoxi üsna vanade versioonide puhul.
Ja veel üks StackExchange'ist:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start