Ie 8 Prompts User On "slow" Jquery Script

I have a form with over 100 list items that I must reorder on submit. The following code works to reorder my list without any apparent problems in Firefox; however, IE prompts with

Solution 1:

I didn't try it with 100 items but it totally worked with 2.

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

Solution 2:

Used a couple of different approaches and got interesting results for different browsers. Unfortunately, the one browser that's troubling as usual is the one I don't have access to. I would appreciate if anyone can remark on how these tests run on IE.

There was not much to be gained by removing the use of jQuery altogether on Chrome, but skipping jQuery had much better results on other browsers. Also, as the number of <li> elements increases, it helps to construct an array with just the id's and sort that. Once the sorting is done, the sorted ID's array can be used to get the nodes data in proper order using this array.

Sort an array of list items.

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

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

Sort an array of id's.

functionsortIDs() {
    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;
    });
}

See the results at http://jsfiddle.net/hwxmJ/4/. Safari crapped out for some reason at 1000 items, while others - Chrome, Opera, Firefox worked fine with 2000 elements.

Solution 3:

Your code suggests that your IDs are numeric, which is not valid in HTML. You should change your design. Also, you can do this very simply and with better performance without jQuery.

The following assumes your IDs are of the form "li_x" where x is an integer. It isn't fully optimized since it calls the function to extract the numeric ID in every comparison. You could instead cache the numeric IDs in advance if you need to improve performance, but I don't think it'll be bad enough to warrant it.

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

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

Solution 4:

You can also break it into smaller chunks and give the browser 'control' periodically:

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