Javascript参数更改值？

我正在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++;
        }
    };
});

拉斐尔（函数（）{ var r=拉斐尔（“测试”）， run=document.getElementById（“run”），set=r.set（r.circle（62100,6）， r、 圆（125100,3），右圆（139100,3）， r、 圆圈（153100,3），右圆圈（167100,3）， r、 圆圈（181100,3），右圆圈（195100,3）， r、 圆（209100,3），右圆（223100,3）， r、 圆圈（237100,3），右圆圈（251,100,3）， r、 圆圈（265100,3），右圆圈（2791000,3）， r、 圆圈（2931003），右圆圈（3071003）， r、 圆圈（321100,3），右圆圈（3341000,3）， r、 圆圈（348100,3），右圆圈（3621000,3）， r、 圆（376100,3），右圆（390100,3））.attr({ 笔画：“无”， 填写：“e6” }), 淡入=功能（obj、id、x）{ 警报（'passed x='+x）； 返回函数（）{ obj[（5*x）-id].attr({ 填写：“49719b”， r:4 }).制作动画({ 填写：#e6“， r:3 }, 400); }; }; run.onclick=function（）{ var i=0；

---

而（i您的

fade

函数是在

for

循环已经退出（在每个动画步骤结束时）之后调用的。

x

的值将是

2

，因为此时循环应该退出（当

x

不是

时，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);
}

for（x=1；x很好，谢谢你，它现在正在工作。但我不太明白这里发生了什么。你将setTimeout调用封装在一个函数中，以确保x随时间保持它的值？语法对函数（x）{…}（x）做了什么这个语法允许你在匿名函数定义后立即调用它，我将x作为参数传递给这个函数。