優化jQuery的文件檢查

Question

背景

我們正在創造在南非一幫診所的信息管理系統。這個系統的一部分是每個診所的照片庫。每家診所的照片數量不受限制。

問題

因爲我們需要上傳大約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); 
}); 

現在，這是執行每個文件？如果是這樣，可能是更改隊列爲每個文件觸發了這一塊。對於600個文件，你說5分鐘，即每個文件500毫秒。淡入/淡出每個文件需要200 + 200 = 400毫秒。大約我們在那裏。作爲一項測試，我會將淡入/淡出降至1毫秒（接下來的瞬間），並測試這是否是問題。