Обратный вызов анимации jquery - как передать параметры в обратный вызов - PullRequest
Новая
       26

Обратный вызов анимации jquery - как передать параметры в обратный вызов

11 голосов
/ 30 марта 2010

Я создаю анимацию jquery из многомерного массива, и в обратном вызове каждой итерации я хотел бы использовать элемент массива. Однако, так или иначе, я всегда получаю последний элемент массива вместо всех разных элементов.

HTML:

<div id="square" style="background-color: #33ff33; width: 100px; height: 100px; position: absolute; left: 100px;"></div>

JavaScript: 

$(document).ready(function () {

// Array with Label, Left pixels and Animation Lenght (ms)
LoopArr = new Array(
    new Array(['Dog', 50, 500]),
    new Array(['Cat', 150, 5000]),
    new Array(['Cow', 200, 1500])
);

$('#square').click(function() {

for (x in LoopArr) {
    $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], function() {
        alert (LoopArr[x][0][0]);
    });
}

});

});

`

Текущий результат: Корова, Корова, Корова

Желаемый результат: собака, кошка, корова

Как я могу убедиться, что соответствующий элемент массива возвращается в обратном вызове?

Ответы [ 2 ]

17 голосов
/ 30 марта 2010

Проблема в том, что x изменяется к тому времени, когда обратный вызов оценивает его. Вам нужно создать для него отдельное закрытие: 

for (x in LoopArr) {
    $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], 
      (function (z) {
        return function() {
            alert (LoopArr[z][0][0]);
        }
    })(x));
}

Я переименовал параметр в z здесь для пояснения, вы передаете x в качестве аргумента функции, которая возвращает функцию, которая использует переменную scoped z, которая хранит состояние x когда он передан.

7 голосов
/ 30 марта 2010

Классическая ошибка в Javascript. Попробуйте это: 

for (x in LoopArr) {
    (function(x) {
      $("#square").animate({ left: LoopArr[x][0][1] }, LoopArr[x][0][2], function() {
        alert (LoopArr[x][0][0]);
      });
    })(x);
}

Это гарантирует, что для каждой функции обратного вызова анимации создается отдельная переменная, созданная при выполнении цикла.

...