为什么函数之间的setTimeouts不起作用？

Question

I have a series of raphael animations that I want to fire in a specific sequence.

1. Fade in the curve.
2. Fade in the ball.
3. Animate the ball along the curve.

I have a setTimeout between each function, but the animations just fire simultaneously.

View it on JSFiddle or here:

Raphael("bounce", 640, 480, function () {
        var r = this,
            p =                 r.path("M0,77.255c0,0,269.393,37.431,412.96,247.653 c0,0,95.883-149.719,226.632-153.309").attr({stroke: "#666", opacity: .0, "stroke-width": 1}),
            len = p.getTotalLength(),
        e = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000", opacity:0}).onAnimation(function () {
                var t = this.attr("transform");
            });
        r.customAttributes.along = function (v) {
            var point = p.getPointAtLength(v * len);
            return {
                transform: "t" + [point.x, point.y] + "r" + point.alpha
            };
        };
        e.attr({along: 0});

        var rotateAlongThePath = true;
        function fadecurve(ca,ba,aa,ab){
            ca.animate({opacity:1},2000);
            setTimeout(fadeball(ba,aa,ab),6000);
        }
        function fadeball(ba,aa,ab) {
               ba.animate({opacity:1},400);
               setTimeout(run(ba, aa,ab),5000);
        }
        function run(ba,aa,ab) {
               ba.animate({opacity:1},400);
               ba.animate({along: aa}, ab, ">", function () {
                ba.attr({along: aa});
            });
        }
        fadecurve(p,e,.9,500);
});   

Answer 1

Use anonymous functions like:

setTimeout(function(){
  fadeball(ba,aa,ab);
},6000);

With setTimeout(fadeball(ba,aa,ab),6000); the function fadeball gets called immediately because of () which is what is the problem.

Make sure to call the run function that way also :)

Answer 2

the problem lie in your function referencing inside your setTimeout

setTimeout(fadeball(ba,aa,ab),6000);

What you are doing here is executing the function and then assigning the result as the first argument of your setTimeout, if you use an anonymous function it will be fine.

setTimeout(function(){
  fadeball(ba,aa,ab);
},6000);

Answer 3

You are calling your functions immediately and then passing the results of that function to setTimeout . You need to instead pass a function to setTimeout :

setTimeout(function(){
    fadeball(ba,aa,ab);
},6000);

Answer 4

I'm sorry if this is off-topic, but the way you are doing this is not scalable. While setting repeated timeouts like this works for a few functions, multi-step animations become increasingly cumbersome as the number of steps increase. jQuery can sequence animation, but often jQuery's built-in animation queue does not offer the features needed (like waterfall properties). Here is a more concise, powerful and scalable alternative with Frame.js :

  var ca = p, ba = e, aa = .9, ab = 500;
  Frame(500, function(next){
      ca.animate({opacity:1}, 2000, next);
  });
  Frame(4000, function(next){
      ba.animate({opacity:1}, 400, next);
  });
  Frame(5000, function(next){
      ba.animate({opacity:1}, 400);
      ba.animate({along: aa}, ab, ">", next);
  });
  Frame(function(next){
      ba.attr({ along: aa });
      next();
  });
  Frame.init();

Answer 5

JQuery's animate function has a animation-complete callback so you can fire animations in succession:

function SecondAnimation() { $('element').animate(....., ThirdAnimation); }
function ThirdAnimation() { $('element').animate(....., FourthAnimation); }
function FourthAnimation() { $('element').animate(.....); }


$('element').animate(....., SecondAnimation);