Korvaukset setInterval-palveluun requestAnimationFrame - -toiminnon avulla CSS-temppuja

Animaation suhteen meille sanotaan, että setIntervalse on huono idea. Koska esimerkiksi silmukka kulkee riippumatta kaikesta muusta, sen sijaan, että kohteliaasti antaisi requestAnimationFrametahdon. Jotkin selaimet saattavat myös "toistaa kiinniottoa" setInterval-silmukalla, jossa passiivinen välilehti on saattanut jonottaa iteraatioita ja suorittaa sitten ne kaikki nopeasti saadakseen kiinni, kun se aktivoituu uudelleen.

Jos haluat käyttää setInterval, mutta haluat suorituskyvyn kohteliaisuuden requestAnimationFrame, Internetissä on joitain vaihtoehtoja!

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

Katso muunnelmien kommentista, kuten aikavälin tyhjentäminen, aikakatkaisujen asettaminen ja tyhjentäminen.

Tämä oli muunnelma Joe Lambertin versiosta:

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

Mikä on osittain täsmällisempi, koska se käsittelee toimittajan etuliitteitä. On hyvin todennäköistä, ettet tarvitse toimittajan etuliitettä. Katso requestAnimationFrame selaimen tuesta. Jos sinun on tuettava IE 9: tä tai Android 4.2-4.3: ta, et voi käyttää sitä ollenkaan. Toimittajan etuliite auttaa vain melko vanhoissa Safarin ja Firefoxin versioissa.

Ja vielä yksi StackExchange:

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