„SetInterval“ pakaitalai naudojant requestAnimationFrame - CSS-gudrybės

Kalbant apie animaciją, mums sako, kad setIntervaltai yra bloga idėja. Nes, pavyzdžiui, kilpa veiks nepriklausomai nuo to, kas vyksta, o ne mandagiai pasiduos kaip requestAnimationFramevalia. Be to, kai kurios naršyklės gali „žaisti pasisekimą“ naudodamos „setInterval“ kilpą, kur neaktyvus skirtukas galėjo sudaryti eilių eilę ir tada jas visas paleisti labai greitai, kad vėl atsigautų.

Jei norite naudoti setInterval, bet norite mandagumo requestAnimationFrame, internetas turi keletą galimybių!

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

Žiūrėkite komentarus apie variantus, pvz., Intervalų išvalymą ir skirtojo laiko nustatymą bei išvalymą.

Tai buvo Joe Lamberto versijos variantas:

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

Kuris iš dalies yra tikslesnis, nes jis tvarko pardavėjo priešdėlius. Labai tikėtina, kad jums nereikalingas pardavėjo priešdėlis. Žr. Naršyklės palaikymą dėl requestAnimationFrame. Jei jums reikia palaikyti „IE 9“ arba „Android 4.2–4.3“, to visiškai negalite naudoti. Pardavėjo priešdėlis padeda tik gana senoms „Safari“ ir „Firefox“ versijoms.

Ir dar vienas iš „StackExchange“:

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