jQuery动画里面的递归函数很慢

时间:2014-01-31 20:56:19

标签: javascript jquery html

我有一个箭头的小动画,在三张车的照片上蹦蹦跳跳。箭头开始时每次弹跳200ms,每次转弯时间增加200ms,直到第3次转弯停在第3次。

它几乎可以在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()的原始调用早已完成。”

1 个答案:

答案 0 :(得分:1)

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

我修改了你提供的小提琴: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可以通过按钮轻松切换回功能。