Использование событий в отдельных функциях плюс собственные переменные

Question

Я пробую кое-что с HTML5 Multiupload.Так что у меня есть форма и я могу загрузить несколько файлов.Они читаются через FileApi, и информация о файле показывается пользователю.

Псевдокод:

<div id="info">
   <div id="file_1">...</div>
   <div id="file_2">...</div>
   ...
</div>

Поэтому я обрабатываю все файлы с $.each() и увеличиваю var fileId.Для самой загрузки я добавляю EventListener в мой XMLHTTPRequest

xhr.addEventListener("load", uploadComplete, false);

Но я не хочу удалять файловый контейнер #file_X после завершения загрузки.Так что я мог бы сделать это:

xhr.addEventListener("load", function(evt) {
   if(evt.target.readyState == 2 && evt.target.status == 200)
   {
       $('#file_' + fileId).slideUp();
   }
}

И мой вопрос, могу ли я отделить этот код в функции?Не получается, что я отправляю событие и параметр в отдельную функцию, например так:

xhr.addEventListener("load", uploadComplete(evt, fileId), false);

Есть ли более разумный способ сделать это:

xhr.addEventListener("load", function(evt) {
   uploadComplete(evt, fileId);
});

Answer 1

Редактировать : Извините, я неправильно понял ваш вопрос. Я обновил свой ответ.

Скрипт не работает, потому что после цикла $.each(), var fileId будет содержать значение, которое было задано на последней итерации цикла. Так что если у вас есть 10 файлов, fileId будет "file_10" для остальной части сценария (что не то, что вам нужно).

Вместо ссылки на var fileId вы хотите передать обработчику событий значение current . К счастью, вы можете сделать это, создав замыкание:

$('#info').each(function(){
    /* Do your thing, start the XHR and whatnot */

    (function(currentFileId) {
        xhr.addEventListener("load", function(evt) {
            uploadComplete(evt, currentFileId);
        });
    }) (fileId);
});

Подробнее о замыканиях можно прочитать в любой хорошей книге по JavaScript или в Интернете, например, здесь (MDN) .

Надеюсь, это поможет.