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);

设定的超时值应该给浏览器一些喘息的空间，但你可能会想工作的正在进行的一些指示页。