Question

我正在我的软件中创建一项功能，允许用户一次编辑多个项目。他们可以选择他们想要的项目，每个项目都放在一列中。然后我创建了一个拖放界面来复制每个项目的数据。

问题是，我必须为每列加载一个sortable。如果他们选择10列，它会加载很多可排序的内容，导致浏览器挂起并在FireFox中显示一条消息，询问我是否要停止脚本运行。这显然是因为浏览器的javascript执行时间有限。

有没有办法让jQuery sortables加载而不会导致浏览器挂起？

不确定它是否有帮助，但我的代码......

<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
    }
}

然后在文档.ready事件中：initSortable(0);

设置超时应该为浏览器提供一些喘息空间，尽管您可能希望在页面上显示正在进行的工作。

jQuery导致浏览器在大量可排序时超时

1 个答案: