Question

我正在raphaeljs上建立一个跑步灯库。在下面的代码示例中，我尝试迭代5个块中的圆形集，并单独设置块的动画。

我不明白为什么x在第一个警报中的值为1，在将其传递给淡入淡出函数后变为值2。有什么想法吗？我必须忽视一些东西，不能弄明白......谢谢！

Raphael(function() {

    var r = Raphael("Test"),

    run = document.getElementById("run"), set = r.set(r.circle(62, 100, 6),
            r.circle(125, 100, 3), r.circle(139, 100, 3),
            r.circle(153, 100, 3), r.circle(167, 100, 3),
            r.circle(181, 100, 3), r.circle(195, 100, 3),
            r.circle(209, 100, 3), r.circle(223, 100, 3),
            r.circle(237, 100, 3), r.circle(251, 100, 3),
            r.circle(265, 100, 3), r.circle(279, 100, 3),
            r.circle(293, 100, 3), r.circle(307, 100, 3),
            r.circle(321, 100, 3), r.circle(334, 100, 3),
            r.circle(348, 100, 3), r.circle(362, 100, 3),
            r.circle(376, 100, 3), r.circle(390, 100, 3)).attr({
        stroke : "none",
        fill : "#e6e6e6"
    }),

    fade = function(obj, id, x) {
        alert('passed x = ' + x);
        return function() {

            obj[(5 * x) - id].attr({
                fill : "#49719b",
                r : 4
            }).animate({
                fill : "#e6e6e6",
                r : 3
            }, 400);
        };
    };

    run.onclick = function() {

        var i = 0;

        while (i <= 0) {

            for (x = 1; x <= 1; x++) {

                alert('initial x = ' + x);

                setTimeout(function() {
                    set[0].animate({
                        "20%" : {
                            callback : fade(set, 0, x)
                        },
                        "40%" : {
                            callback : fade(set, 1, x)
                        },
                        "60%" : {
                            callback : fade(set, 2, x)
                        },
                        "80%" : {
                            callback : fade(set, 3, x)
                        },
                        "100%" : {
                            callback : fade(set, 4, x)
                        }
                    }, 650);
                }, i * 650);
            }
            i++;
        }
    };
});

Answer 1

fade循环已经退出后（在每个动画步骤结束时）调用for函数。 x的值将为2，因为这是循环应该退出的时间（x不是<= 1时，第一次发生时是{{1}到达x）。

Answer 2

Javascript没有变量的块范围......你必须使用闭包：

for (x = 1; x <= 1; x++) {
    (function (x) {
        alert('initial x = ' + x);

        setTimeout(function () {
            set[0].animate({
                "20%": {
                    callback: fade(set, 0, x)
                },
                "40%": {
                    callback: fade(set, 1, x)
                },
                "60%": {
                    callback: fade(set, 2, x)
                },
                "80%": {
                    callback: fade(set, 3, x)
                },
                "100%": {
                    callback: fade(set, 4, x)
                }
            }, 650);
        }, i * 650);
    })(x);
}

Javascript参数更改值？

2 个答案: