javascript - 递归函数内的 jQuery 动画非常慢

Question

我有一个箭头在三张汽车图片上水平弹跳的小动画。箭头以每次弹跳 200 毫秒开始，每转一圈时间增加 200 毫秒，直到在 3 号车上第 7 圈停止。

它在 Chrome 和 Firefox 上几乎可以顺利运行。在 Safari 7 上，它启动很快，两圈后变得非常慢，并且跳过很多帧。

Javascript代码如下:

var fwd = true;
var cnt = 6;
var time = 200;

function play(){
    var tgt = fwd ? '310px' : '10px';

    $('#arrow').animate({left: tgt}, time, function() {
        if (cnt > 0){
            cnt--;
            fwd = !fwd;
            time += 200;
            play();
        } else {
            finalTarget();
        }
    });

}

function finalTarget (){
    $('#arrow').animate({left: '230px'}, 466, function(){
        $('#car3').hide(0).show('pulsate', {times: 3}, 600, function(){
            $('#car1, #car2').fadeTo('slow', 0.3);
        });
    });
}

代码也在 JSFiddle http://jsfiddle.net/MkeeE/1/

这段代码有什么问题？

我不应该在回调函数中调用“play”函数吗？

编辑:正如 @jfriend00 在评论中指出的那样，这段代码没有递归。 “当调用动画完成函数并再次调用 play() 时，play() 的原始调用早已完成。”

Answer 1

执行“循环”动画风格的典型方法是在回调中交替使用动画函数。

我修改了您提供的 fiddle :http://jsfiddle.net/Culyx/fLz5U/4/

Jquery:

cnt = 6;

var arrowSpeed = 400;
bounceLeft = function(){
        $("#arrow").animate({left: "+=380px"},{duration:arrowSpeed, complete: bounceRight});
    }
    bounceRight = function(){
        cnt--;
        if(cnt>0){
            $("#arrow").animate({left: "-=380px"},{duration:arrowSpeed, complete: bounceLeft});}else{
            finalTarget();
            }
    }
bounceLeft();


function finalTarget (){
    $('#arrow').animate({left: '230px'}, 466, function(){
        $('#car3').hide(0).show('pulsate', {times: 3}, 600, function(){
            $('#car1, #car2').fadeTo('slow', 0.3);
        });
    });
}

动画是一样的，但我想我误判了动画宽度；还可以将其切换到 Document.Ready 上，可以通过按钮轻松切换回功能。