Jeśli chodzi o animację, powiedziano nam, że setIntervalto zły pomysł. Ponieważ, na przykład, pętla będzie działać niezależnie od wszystkiego, co się dzieje, zamiast grzecznie ulegać requestAnimationFramewoli. Niektóre przeglądarki mogą również „odtwarzać nadrabianie” za pomocą pętli setInterval, gdzie nieaktywna karta mogła ustawiać w kolejce iteracje, a następnie uruchamiać je wszystkie bardzo szybko, aby nadrobić zaległości, gdy ponownie stanie się aktywna.
Jeśli chcesz skorzystać setInterval, ale chcesz uprzejmości wydajności requestAnimationFrame, Internet ma kilka dostępnych opcji!
Od 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; );Zobacz komentarz dotyczący odmian, takich jak czyszczenie interwału oraz ustawianie i czyszczenie limitów czasu.
To była odmiana wersji Joe 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); );Co jest po części bardziej szczegółowe, ponieważ obsługuje przedrostki dostawców. Jest bardzo prawdopodobne, że nie potrzebujesz prefiksu dostawcy. Zobacz obsługę przeglądarki dla requestAnimationFrame. Jeśli potrzebujesz obsługi IE 9 lub Androida 4.2-4.3, nie możesz tego w ogóle używać. Prefiksowanie dostawcy pomaga tylko w przypadku dość starych wersji Safari i Firefox.
I jeszcze jedno od StackExchange:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start