jQuery導致瀏覽器在大量排序時超時

Question

我在我的軟件中創建了一個功能，允許用戶一次編輯多個項目。他們可以選擇他們想要的項目，並將每個項目放在一列中。然後我創建了一個拖放界面來複制每個項目的數據。

問題是，我必須爲每列加載一個可排序的元素。如果他們選擇了10列，它會加載大量的可排序數據，導致瀏覽器掛起，並在FireFox中顯示一條消息，詢問是否要停止腳本運行。這顯然是因爲瀏覽器的JavaScript執行時間有限。

有沒有辦法讓jQuery排序加載而不會導致瀏覽器掛起？

不知道這會幫助，但我的代碼...

<script type="text/javascript"> 
$(document).ready(function() { 

    $(".servicesMultipleMembers").sortable({ 
     connectWith: '.servicesMultipleMembers', 
     placeholder: 'servicePlaceHolder', 
     containment: '#servicesMembers', 
     helper: 'clone', 
     start: function(event, ui) { 
      moving_li_index_members = $(this).find('li:hidden').index(); 
      $(this).find('li:hidden').show(); 
     }, 
     remove: function(event, ui) { 
      var newRow = $(ui.item).html(); 
      var newRowRel = $(ui.item).attr('memberId'); 
      var newRowTarget = $(event.target).find('li:eq(' + (moving_li_index_members) + ')'); 
      if ($(newRowTarget).length == 0) { 
       $(event.target).append('<li memberId="' + newRowRel + '">' + newRow + '</li>'); 
      } else { 
       newRowTarget.before('<li memberId="' + newRowRel + '">' + newRow + '</li>'); 
      } 
     }, 
     receive: function(event, ui) { 
         var newRowImg = $(ui.item).find('span.serviceTitle img').attr('src'); 
      var newRow = $(ui.item).html(); 
      newRow = newRow.replace(newRowImg, site_url + 'img/help.png'); 
      newRow = newRow.replace('<span class="member_declined">', '<span class="">'); 
      $(ui.item).html(newRow); 
      MultipleServices.checkServicesMembersConflicts($(ui.item)); 
      update_member_stop = true; 
     }, 
     update: function(event, ui) { // Only update if reordering list 
      if (!update_member_stop && $(event.target).attr('id') == $(ui.item).parent().attr('id')) 
       MultipleServices.updateServiceMembers($(ui.item).parent()); 
      update_member_stop = false; 
     } 
    }); 

}); 
</script> 

Answer 1

我會嘗試做與setTimeout和遞歸函數的東西。也許是這樣的：

function initSortable(idx) { 
    if ($(".servicesMultipleMembers").eq(idx).length >0) { 
     $(".servicesMultipleMembers").eq(idx).sortable({ 
      connectWith: '.servicesMultipleMembers', 
      placeholder: 'servicePlaceHolder', 
      containment: '#servicesMembers', 
      helper: 'clone', 
      start: function(event, ui) { 
       moving_li_index_members = $(this).find('li:hidden').index(); 
       $(this).find('li:hidden').show(); 
      }, 
      remove: function(event, ui) { 
       var newRow = $(ui.item).html(); 
       var newRowRel = $(ui.item).attr('memberId'); 
       var newRowTarget = $(event.target).find('li:eq(' + (moving_li_index_members) + ')'); 
       if ($(newRowTarget).length == 0) { 
        $(event.target).append('<li memberId="' + newRowRel + '">' + newRow + '</li>'); 
       } else { 
        newRowTarget.before('<li memberId="' + newRowRel + '">' + newRow + '</li>'); 
       } 
      }, 
      receive: function(event, ui) { 
          var newRowImg = $(ui.item).find('span.serviceTitle img').attr('src'); 
       var newRow = $(ui.item).html(); 
       newRow = newRow.replace(newRowImg, site_url + 'img/help.png'); 
       newRow = newRow.replace('<span class="member_declined">', '<span class="">'); 
       $(ui.item).html(newRow); 
       MultipleServices.checkServicesMembersConflicts($(ui.item)); 
       update_member_stop = true; 
      }, 
      update: function(event, ui) { // Only update if reordering list 
       if (!update_member_stop && $(event.target).attr('id') == $(ui.item).parent().attr('id')) 
        MultipleServices.updateServiceMembers($(ui.item).parent()); 
       update_member_stop = false; 
      } 
     }); 
     setTimeout(initSortable(idx+1),500); 
    } else { 
     //remove loading message logic goes here 
    } 
} 

，然後在文檔。就緒事件：initSortable(0);

設定的超時值應該給瀏覽器一些喘息的空間，但你可能會想工作的正在進行的一些指示頁。