Оптимизация проверки

Question

Истории вопроса

Мы создаем систему управления информации для связки клиник в Южной Африке JQuery файла. Часть этой системы - фотогалерея каждой клиники. Количество фотографий в клинике не ограничено.

Проблема

Так как нам нужно будет загрузить около 400 клиник данных, нам нужна простая система, которая позволяет для "загрузок один идти. Я написал функцию jQuery, которая - когда вход для загрузки изменен - ​​в основном проверяет имя файла и в соответствии с этим именем делит его на разделы (в соответствии с названиями клиник)

Проблемы при добавлении много файлов, время, которое требуется для обработки, навсегда. Для обработки 600 файлов требуется около 5 минут. И это просто, чтобы разделить их на разделы.

Кодекс

$("#UploadFiles").on('change',function() { 
    $("#UploadAddForm").fadeOut(200,function() { 
     $(".info").fadeIn(200); 
    }); 
    for (var i=0; i < this.files.length; i++) { 
     var file = this.files[i]; 
     file.ext = file.name.substr(file.name.lastIndexOf('.')+1).toLowerCase(); 
     file.icon = '../img/icon/file_extension_' + file.ext + '.png'; 
     file.category = fileObject[file.ext] ? fileObject[file.ext] : 'Unknown'; 
     file.owner = file.name.substr(0,file.name.indexOf('_')); 
     $.ajax({ 
      url: 'checkClinic/'+file.owner, 
      type: 'post', 
      dataType: 'json', 
      async: false, 
      success: function(data) { 
       if(!data) { 
        file.owner = 'Unknown'; 
       } 
      } 
     }); 
     file.div = file.owner.replace(/ /g,"_"); 
     $("#UploadAddForm").append(
      $('<input type="hidden">').attr({ 
       'name' : 'data[FileData][' + i + '][name]', 
       'id' : 'FileData'+i+'Name', 
       'value' : file.name 
      }) 
     ).append(
      $('<input type="hidden">').attr({ 
       'name' : 'data[FileData][' + i + '][owner]', 
       'id' : 'FileData'+i+'Owner', 
       'class' : 'file_owner', 
       'value' : file.owner 
      }) 
     ); 
     if($('#' + file.div).length > 0 || file.owner == 'Unknown') { 
      //do nothing 
     } else { 
      $('.info').append(
       $('<div>').attr({ 
        'id' : file.div, 
        'class' : 'file_holder' 
       }).html('<h3>' + file.owner + '</h3>') 
      ); 
     } 
     if(file.category != 'Unknown' && file.owner != 'Unknown') { 
      $holder = $('#' + file.div); 
     } else { 
      $holder = $('.unknown-files'); 
      $('#FileData'+i+'Owner').val('unknown'); 
     } 
     $($holder).append(
      $('<div>').attr({ 
       class: 'fake_file', 
       'input': '#FileData'+i+'Owner', 
       id: 'File'+i+'Selector' 
      }).html('<img src="' + file.icon + '">&nbsp;' + file.name).draggable({ 
       opacity: 0.7, 
       revert: "invalid", 
       stack: '.file_holder' 
      }) 
     ).droppable({ 
      accept: ".fake_file", 
      drop: function(event,ui) { 
       $(this).append(ui.draggable); 
       $(ui.draggable).animate({ 
        left: 0, 
        top: 0 
       }); 
       $(ui.draggable.attr('input')).val($(this).attr('id').replace(/_/g," ")); 
      } 
     }); 

     if(file.category == 'image') { 
      $("#UploadAddForm").append(
       $('<input type="hidden">').attr({ 
        'name' : 'data[FileData][' + i + '][cover]', 
        'id' : 'FileData'+i+'Cover', 
        'value' : 'No' 
       }) 
      ); 
      $('#File'+i+'Selector').append(
       $('<input>').attr({ 
        type: 'radio', 
        name: file.div, 
        id: 'File'+i, 
        'cover': '#FileData'+i+'Cover', 
        class: 'cover-selector', 
       }).on(
       'click',function(e) { 
        $name = $(this).attr('name'); 
        $.each($('input[name="' + $name + '"]'),function(i,v) { 
         $($(this).attr('cover')).val('No'); 
        }); 
        $($(this).attr('cover')).val('Yes'); 
       }) 
      ).append(
       $('<label>').attr({ 
        'for': 'File'+i 
       }).html('Cover') 
      ); 
     } 
    } 
    $('.info').append(
     $('<div>').attr({ 
      'class' : 'submit' 
     }).append(
      $('<input>').attr({ 
       'type' : 'submit', 
       'value' : 'Upload', 
       'class' : 'submit-upload' 
      }) 
     ) 
    ); 
    $('.submit-upload').on('click',function() { 
     $('#UploadAddForm').submit(); 
    }); 
}); 

Вопрос

Есть ли способ, что я могу оптимизировать этот код? Он работает и делает именно то, что ему нужно делать, но для этого требуется слишком много времени.

Дополнительная информация

Я понимаю, что не может быть 100% ясно. Поэтому я добавляю несколько фотографий.

Это то, что страница выглядит, когда я сначала загрузить его:

Затем я выбираю файлы:

Если я выбираю много файлов в шаг выше, он навсегда обрабатывается, пока не отобразит эту страницу:

Как уже говорилось, он работает нормально, это просто требуется навсегда для запуска, поэтому я хочу знать, есть ли способ, которым я могу его оптимизировать.

Answer 1

Возможно, узким местом является загрузка. Сколько у вас полосы пропускания и насколько велики файлы?

Вы должны попробовать точно такой же код с крошечными (~ 1KB), но многочисленными (сотнями) файлов. Если это быстро, проблема заключается только в размере файла и пропускной способности, которые у вас есть.

Вторая вещь, которая приходит мне на ум. В начале вашего кода у вас есть:

$("#UploadAddForm").fadeOut(200,function() { 
    $(".info").fadeIn(200); 
}); 

Теперь, выполняется ли это для каждого файла? Если это так, может случиться так, что очередь изменений вызывает эту часть для каждого файла. Вы говорите 5 минут для 600 файлов, это 500 мс на файл. Ввод/выпадение затухания займет 200 + 200 = 400 мс на файл. Примерно мы там.

В качестве теста я бы понизил этот уровень затухания до 1 мс (рядом с мгновенным) и протестировал, если это проблема.