如何通過requestAnimationFrame替換setInterval

這裏是我的情況，我需要加快函數的運行時間，所以setInterval不是明智的選擇，對嗎？因爲每次至少需要4ms。如何通過requestAnimationFrame替換setInterval

因此，我可以將setInterval函數更改爲requestAnimationFrame，但我不太瞭解requestAnimationFrame的工作原理。

例如

// some code here 
var interval = setInterval(doSomething, 10) 
var progress = 0 
function doSomething(){ 
    if (progress != 100){ 
     // do some thing here 
    }else{ 
     clearInterval(interval) 
    } 
}

，我該如何申請requestAnimationFrame？

來源

2013-07-17 Kimmi

我不知道你所說的「需要加快功能運行時間」的意思。 'requestAnimationFrame'對於*動畫非常有用* - 也就是說，當你想讓你的動畫繪製週期與實際的屏幕重繪同步時（這是較慢的）。實際上 – voithos

@voithos，該功能需要差不多1分鐘，在頁面上畫的東西，如果我設定的功能爲間隔字段，它會花費更多的時間。我只是想知道requestAnimationFrame的幫助嗎？ – Kimmi

如果你沒有動畫，請不要使用任何動畫。 – voithos

-1

看起來十分硬朗更好 - >just the code,no animation

每一件事情是simplification.No需要使用的setInterval的代碼中註釋。當我們想要清除間隔時，只需使用cancelAnimationFrame。

// This makes sure that there is a method to request a callback to update the graphics for next frame 

var requestAnimationFrame = 
     window.requestAnimationFrame ||  // According to the standard 
     window.mozRequestAnimationFrame || // For mozilla 
     window.webkitRequestAnimationFrame || // For webkit 
     window.msRequestAnimationFrame ||  // For ie 
     function (f) { window.setTimeout(function() { f(Date.now()); }, 1000/60); }; // If everthing else fails 

var cancelAnimationFrame = 
     window.cancelAnimationFrame || 
     window.mozCancelAnimationFrame || 
     window.webkitCancelAnimationFrame || 
     window.msCancelAnimationFrame; 

// your code here 

var progress = 0; 

function doSomething() { 
    if (progress != 100) { 
     // do something here 
     var myAnimation = requestAnimationFrame(doSomething); 
    } else { 
     // don't use clearInterval(interval) instead when you know that animation is completed use cancelAnimationFrame() 
     cancelAnimationFrame(myAnimation); 
    }   
}

一些鏈接值得一讀 - >

其他的事情，你應該知道：

皇家空軍還處於發展階段。
Why doesn't jQuery use requestAnimationFrame?

來源

2013-07-27 19:36:41

如何通過requestAnimationFrame替換setInterval

回答

相關問題