Проблемы с функцией обратного вызова Javascript Draggables в операторе for

Question

Я определил массив:

images_array[0]=['c5','user.png','100','100'];
images_array[1]=['c6','user.png','300','400'];
images_array[2]=['c7','mega1.jpg','400','500'];

создание draggables, как эта работа:

drag_array[images_array[0][0]]=new Draggable(images_array[0][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[0][0]]);}});

drag_array[images_array[1][0]]=new Draggable(images_array[1][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[1][0]]);}});

drag_array[images_array[2][0]]=new Draggable(images_array[2][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[2][0]]);}});

Создание перетаскиваемых объектов в операторе for не работает с функцией обратного вызова ...

for (i=0;i<images_array.length;i++) {
drag_array[images_array[i][0]]=new Draggable(images_array[i][0], { revert: true, onEnd:function(){displaymessage(drag_array[images_array[i][0]]);}});
}

=> Firefox говорит, что images_array[i][0] не определено ... Удаление функции обратного вызова

drag_array[images_array[i][0]]=new Draggable(images_array[i][0], { revert: true});

=> работает ...: (

Есть идеи, почему не работает последний аргумент из функции обратного вызова? ТХ

Answer 1

Это одна типичная ошибка: определение функций в цикле. Если вы определяете функцию, которая имеет доступ к переменной цикла i, то эта переменная не оценивается, когда функция определена , но когда она называется, Но в этот момент цикл уже завершен, и i имеет какое-то нежелательное значение (в вашем случае images_array.length + 1). JavaScript имеет только область действия , а не область блока.

Вы должны захватить значение i, например, используя непосредственную функцию:

for (i=0;i<images_array.length;i++) {
    drag_array[images_array[i][0]] = new Draggable(
            images_array[i][0], 
            { revert: true, 
              onEnd: (function(index) {
                         return function(){
                             displaymessage(drag_array[images_array[index][0]]);
                         };
                     }(i))
            });
}

См. Также Затворы для чайников , Пример 5 и множество вопросов здесь на SO .