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

Я создаю 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]);
    });
}

});

});

`

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

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

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

Ответ 1

Проблема заключается в том, что 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 в качестве аргумента функции, которая возвращает функцию, использующую переменную z, которая хранит состояние x, когда он передан.

Ответ 2

Классическая ошибка в 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);
}

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