Question

我有一个包含超过100个列表项的表单，我必须在提交时重新排序。以下代码用于重新排序我的列表，而在Firefox中没有任何明显的问题;但是，IE会提示消息“此页面上的脚本导致Internet Explorer运行缓慢。如果继续运行，您的计算机可能会无响应。您要中止脚本吗？”如果用户单击“否”，脚本将按预期工作。

var listitems = $(form).find('li').get();
listitems.sort(function(a, b) {
    var compA = $(a).attr('id');
    var compB = $(b).attr('id');
    return (compA - compB);
});

关于如何提高效率的任何想法？

Answer 1

我没有试用100件物品，但它完全适用于2件。

listitems.sort(function(a, b) {
    return (a.id - b.id);
});

Answer 2

使用了几种不同的方法，并为不同的浏览器获得了有趣的结果。不幸的是，像往常一样麻烦的浏览器是我无法访问的浏览器。如果有人能评论这些测试如何在IE上运行，我将不胜感激。

在 Chrome 上完全取消使用jQuery并没有太大的收获，但跳过jQuery在其他浏览器上有更好的结果。此外，随着<li>元素数量的增加，有助于构造一个只包含id和排序的数组。排序完成后，排序后的ID数组可用于使用此数组以正确的顺序获取节点数据。

对列表项数组进行排序。

function sortListItems() {
    var listItems = $("li").get();

    listItems.sort(function(a, b) {
        return a.id - b.id;
    });
}

对id的数组进行排序。

function sortIDs() {
    var listItems = $("li");
    var ids = [];
    for(var i = 0; i < listItems.length; i++) {
        ids.push(listItems[i].id);
    }

    ids.sort(function(a, b) {
        return a - b;
    });
}

查看http://jsfiddle.net/hwxmJ/4/的结果。 Safari出于某种原因出现了1000件商品，而其他商品 - Chrome，Opera，Firefox在2000件产品中运行良好。

Answer 3

您的代码表明您的ID是数字，在HTML中无效。你应该改变你的设计。此外，您可以非常简单地执行此操作，并且无需jQuery即可获得更好的性能。

以下假设您的ID的格式为“li_x”，其中x是整数。它没有完全优化，因为它调用函数在每次比较中提取数字ID。如果你需要提高性能，你可以提前缓存数字ID，但我认为不足以保证它。

function getNumericId(li) {
    return li.id.split("_")[1];
}

var liList = form.getElementsByTagName("li");
var liArray = Array.prototype.slice.call(liList, 0);
liArray.sort(function(a, b) {
    return getNumericId(a) - getNumericId(b);
});

Answer 4

你也可以把它分成更小的块，并定期给浏览器“控制”：

How can I give control back (briefly) to the browser during intensive JavaScript processing?

IE 8提示用户使用“慢”jQuery脚本

4 个答案: