4

这是我的情况，我需要加快函数运行时间，所以 setInterval 不是一个明智的选择，对吧？因为每次至少要花费 4ms。

那么，我可以将 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？

4

2 回答 2

0

我认为理解 requestAnimationFrame 的关键在于 paul Irish 的解释：

任何在 rAF 中排队的 rAF 都将在下一帧执行​</p>

来自书呆子的 requestAnimationFrame 调度

var rafReference;
var progress = 0;

function doSomething(){
   // only run 100 times
   if (progress < 100){

       /* do what you wanna do here */

       progress++; 
       //recursively calls it self as requestAnimationFrame's callback
       rafReference = requestAnimationFrame(doSomething) // passed as reference
   }else{
       cancelAnimationFrame(rafReference)
   }
}
//starting the recursion
requestAnimationFrame(doSomething)
于 2020-02-25T19:35:29.280 回答
-1

在小提琴中看起来更好->只有代码，没有动画

为了简化，每件事都在代码中进行了注释。无需使用 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);
    }        
}

一些值得一读的链接-->

  1. CreativeJs---任何人都可以给出的最好的解释，每个初学者都必须阅读
  2. 取消动画帧
  3. 链接3->在您的问题的上下文中
  4. 我在谷歌上找到了这个小提琴，和你想要的一样。

您应该知道的其他事项：

于 2013-07-27T19:36:41.897 回答