Изменение параметров Javascript? - PullRequest
Новая
       3

Изменение параметров Javascript?

0 голосов
/ 29 марта 2012

Я строю библиотеку бегущего света на вершине Рафаэля.В приведенном ниже примере кода я пытаюсь перебрать набор окружностей в блоках по 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++;
        }
    };
});

Ответы [ 2 ]

1 голос
/ 29 марта 2012

В 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);
}
1 голос
/ 29 марта 2012

Ваша функция fade вызывается после того, как цикл for уже вышел (в конце каждого шага анимации). Тогда значение x будет равно 2, потому что именно тогда цикл должен завершиться (когда x не равен <= 1, а первый раз, когда x достигает 2).

...