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

Question

我有一系列拉斐尔动画，我想以特定的顺序触发。

1. 曲线淡入。
2. 淡入球。
3. 沿着曲线对球进行动画处理。

我在每个函数之间都有一个 setTimeout，但动画只是同时触发。

View it on JSFiddle或在这里:

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

使用匿名函数，例如:

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

使用 setTimeout(fadeball(ba,aa,ab),6000); 函数 fadeball 会立即被调用，因为 ()是什么问题。

确保也以这种方式调用 run 函数:)