Animasyon söz konusu olduğunda setInterval, bunun kötü bir fikir olduğu söylendi . Çünkü, örneğin, döngü, irade gibi kibarca boyun eğmek yerine, olup biten her şeyden bağımsız olarak çalışır requestAnimationFrame. Ayrıca bazı tarayıcılar, aktif olmayan bir sekmenin yinelemeleri sıraya koyduğu bir setInterval döngüsüyle "yakalama" oynayabilir ve daha sonra tekrar etkin olduğunda yakalamak için hepsini çok hızlı bir şekilde çalıştırabilir.
Kullanmak isterseniz setInterval, ama performans nezaket istiyorum requestAnimationFrame, internet, bazı seçenekleri mevcuttur!
Serguei Shimansky'den:
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; );Aralığı temizleme ve zaman aşımlarını ayarlama ve temizleme gibi varyasyonların açıklamalarına bakın.
Bu, Joe Lambert'in versiyonunun bir varyasyonuydu:
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); );Bu, satıcı öneklerini işlediği için kısmen daha ayrıntılıdır. Muhtemelen satıcı önekine ihtiyacınız yoktur. RequestAnimationFrame için tarayıcı desteğine bakın. IE 9 veya Android 4.2-4.3'ü desteklemeniz gerekiyorsa, bunu hiç kullanamazsınız. Satıcı ön eki, yalnızca Safari ve Firefox'un oldukça eski sürümleri için yardımcı olur.
Ve StackExchange'den bir tane daha:
window.rInterval=function(callback,delay) ( var dateNow=Date.now, requestAnimation=window.requestAnimationFrame, start=dateNow(), stop, intervalFunc=function() ( dateNow()-start