Javascript requestAnimationFrame看起来很慢，cancelAnimationFrame不工作

如果您滚动到JS第63行，您将看到我遇到困难的函数。我试图用requestAnimationFrame替换我的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);
        */
    } 
}

功能设置仪表（val）{
var时间=350；
时间=时间/（数学绝对值（val-preVal））；
如果（val>preVal）{
函数getHigher（）{
if（preVal==val）
取消动画帧（动画）；
preVal++；
drawValueArc（preVal）；
var animate=requestAnimationFrame（getHigher）；
}
getHigher（）；
/*
var animate=setInterval（函数（）{
if（preVal==val）
clearInterval（动画）；
preVal++；
drawValueArc（preVal）；
}，时间）；
*/
}否则如果（val

我只是稍微修改了代码，您几乎可以看到

实际上并不需要

animate

和

animate2

，因为我们不取消requestAnimationFrame（rAF），而只是检查是否存在运行它的条件：

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();

     //...
}

功能设置仪表（val）{
var时间=350；
时间=时间/（数学绝对值（val-preVal））；
如果（val>preVal）{
函数getHigher（）{
preVal++；
drawValueArc（preVal）；
//如果再少一点的话，那就是英国皇家空军
if（preValval）请求动画帧（getLower）；
}
getLower（）；
//...
}

请参见此处的“修改的小提琴”（链接似乎是：

---

@artur99-huh..真奇怪。谢谢，似乎是出于某种原因被删除了-我不确定我能做些什么。