requestAnimationFrame似乎很慢，cancelAnimationFrame不工作 [英] requestAnimationFrame seems slow, cancelAnimationFrame not working

问题描述

这是我的工作。如果滚动到JS第63行会看到我有困难的功能。我试图用requestAnimationFrame替换我的setInterval代码（在注释中）。但动画似乎走得相当慢，也，它不会停止！ 这是一个使用setInterval的工作版本。

相关JS：

  function setGauge（val）{
 var time = 350; 
 time = time /（Math.abs（val  -  preVal））; 
 
 if（val> preVal）{
 function getHigher（）{
 if（preVal == val）
 cancelAnimationFrame（animate）; 
 preVal ++; 
 drawValueArc（preVal）; 
 var animate = requestAnimationFrame（getHigher）; 
} 
 getHigher（）; 
 / * 
 var animate = setInterval（function（）{
 if（preVal == val）
 clearInterval（animate）; 
 preVal ++; 
 drawValueArc （preVal）; 
}，time）; 
 * / 
} else if（val< preVal）{
 function getLower（）{
 if（preVal == val）
 cancelAnimationFrame（animate2）; 
 preVal--; 
 drawValueArc（preVal）; 
 var animate2 = requestAnimationFrame（getLower）; 
} 
 getLower（）; 
 / * 
 var animate2 = setInterval（function（）{
 if（preVal == val）
 clearInterval（animate2）; 
 preVal--; 
 drawValueArc（preVal）; 
}，time）; 
 * / 
} 
} 
  

解决方案<

animate 和<$> c $ c> animate2 不是真的需要，因为我们不取消requestAnimationFrame（rAF），而只是检查它的运行条件是否有：

  function setGauge（val）{
 var time = 350; 
 time = time /（Math.abs（val  -  preVal））; 
 
 if（val> preVal）{
 function getHigher（）{
 preVal ++; 
 drawValueArc（preVal）; 
 
 //如果仍然小于rAF，则
 if（preVal< val）requestAnimationFrame（getHigher）; 
} 
 getHigher（）; 
 
} else if（val< preVal）{
 function getLower（）{
 preVal--; 
 drawValueArc（preVal）; 
 
 // if more more then rAF again 
 if（preVal> val）requestAnimationFrame（getLower）; 
} 
 getLower（）; 
 
 // ... 
} 
  

查看modified fiddle这里（链接似乎是：

http://jsfiddle.net/AbdiasSoftware/cUSBQ/11/

This is what I'm working on. If you scroll to JS line 63 you will see the function I am having difficulty with. I am trying to replace my setInterval code (in comments) with requestAnimationFrame. But the animation seems to be going rather slowly, also, it doesn't ever stop!! Here is a working version with setInterval.

Relevant JS:

function setGauge(val){
    var time = 350;
    time = time / (Math.abs(val - preVal));

    if (val > preVal) {
        function getHigher(){
           if (preVal == val)
                cancelAnimationFrame(animate);
            preVal++;
            drawValueArc(preVal);
            var animate = requestAnimationFrame(getHigher);
        }
        getHigher();
        /*
        var animate = setInterval(function(){
            if (preVal == val)
                clearInterval(animate);
            preVal++;
            drawValueArc(preVal);  
        }, time);
        */
    } else if (val < preVal) {
        function getLower(){
           if (preVal == val)
                cancelAnimationFrame(animate2);
            preVal--;
            drawValueArc(preVal);  
            var animate2 = requestAnimationFrame(getLower);
        }
        getLower();
        /*
        var animate2 = setInterval(function(){
            if (preVal == val)
                clearInterval(animate2);
            preVal--;
            drawValueArc(preVal);  
        }, time);
        */
    } 
}

解决方案

I modified the code just slightly, you where almost there.

The animate and animate2 isn't really needed as we don't cancel the requestAnimationFrame (rAF) but merely check if the condition for it to run is there:

function setGauge(val) {
    var time = 350;
    time = time / (Math.abs(val - preVal));

    if (val > preVal) {
        function getHigher() {
            preVal++;
            drawValueArc(preVal);

            //if still less then rAF again
            if (preVal < val) requestAnimationFrame(getHigher);
        }
        getHigher();

    } else if (val < preVal) {
        function getLower() {
            preVal--;
            drawValueArc(preVal);

            //if still more then rAF again
            if (preVal > val) requestAnimationFrame(getLower);
        }
        getLower();

     //...
}

See modified fiddle here (link seem to:

http://jsfiddle.net/AbdiasSoftware/cUSBQ/11/

这篇关于requestAnimationFrame似乎很慢，cancelAnimationFrame不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！