Zamenjave za setInterval z uporabo requestAnimationFrame - CSS-triki

Kar zadeva animacijo, so nam rekli, da setIntervalje to slaba ideja. Ker se bo na primer zanka izvajala ne glede na kaj drugega, namesto da bi vljudno popuščala kot requestAnimationFramebo. Tudi nekateri brskalniki lahko »igrajo nadoknado« z zanko setInterval, kjer je neaktivni zavihek morda čakal v vrsti ponovitev in jih nato zelo hitro zažene, da dohiti, ko znova postane aktiven.

Če želite uporabljati setInterval, vendar želite vljudnost glede uspešnosti requestAnimationFrame, ima internet na voljo nekaj možnosti!

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

Glejte komentar za spremembe, na primer brisanje intervala ter nastavitev in brisanje časovnih omejitev.

To je bila različica različice Joeja Lamberta:

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

Kar je deloma bolj podrobno, ker obravnava predpono prodajalca. Zelo verjetno vam ni potrebna predpona prodajalca. Glejte podporo brskalnika za requestAnimationFrame. Če morate podpirati IE 9 ali Android 4.2-4.3, tega sploh ne morete uporabiti. Predpona prodajalca pomaga le za precej stare različice Safari in Firefox.

In še en od StackExchange:

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