for loop execute slow for large data

Question

I have a for loop that take too long to execute large amount of data:

for (var itm = 0; itm < itmCount; itm++) {

    var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');

    var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
    $('#widthTest').html(thisCell.text()).css({
    'font-family': thisCell.css('font-family'),
    'font-size': thisCell.css('font-size'),
    'font-weight': thisCell.css('font-weight')
    });
    var maxWidth = Width = $('#widthTest').elementRealWidth() + 17;

    var itm2Count = curObj.length;
            // Loop through Rows
            for (var itm2 = 0; itm2 < itm2Count; itm2++) {

            var thisCell = $(curObj[itm2]);

            $('#widthTest').html(thisCell.html()).css({
            'font-family': thisCell.css('font-family'),
            'font-size': thisCell.css('font-size'),
            'font-weight': thisCell.css('font-weight')
            });

            thisWidth = $('#widthTest').elementRealWidth();
            if (thisWidth > maxWidth) {maxWidth = thisWidth+10;}
            }

    $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth+17);
    $('#' + gridName + ' .jqgfirstrow td:eq(' + 0 + '), #' + gridName + '_' + columnNames[0].name).width('30').css('min-width', '30px');

I get this issue from firefox:

A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

and the Chrome kills the page. Any idea?

UPDATE:

Here is my code after doing chunk:

var itmCount = columnNames.length;

    var numOfElements = itmCount;
    var elementsPerChunk = 50;
    var numOfChunks = numOfElements / elementsPerChunk; //divide it into chunks

    for (var x = 0; x < numOfChunks; x++) {
        setTimeout(function() {
        for (var y = 0; y < elementsPerChunk; y++) {


                var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[elementsPerChunk].name + ']');

                var thisCell = $('#' + gridName + '_' + columnNames[elementsPerChunk].name + ' div');
                $('#widthTest').html(thisCell.text()).css({
                'font-family': thisCell.css('font-family'),
                'font-size': thisCell.css('font-size'),
                'font-weight': thisCell.css('font-weight')
                });
                var maxWidth = Width = $('#widthTest').elementRealWidth() + 17;

                var itm2Count = curObj.length;
                        // Loop through Rows
                        for (var itm2 = 0; itm2 < itm2Count; itm2++) {

                        var thisCell = $(curObj[itm2]);

                        $('#widthTest').html(thisCell.html()).css({
                        'font-family': thisCell.css('font-family'),
                        'font-size': thisCell.css('font-size'),
                        'font-weight': thisCell.css('font-weight')
                        });

                        thisWidth = $('#widthTest').elementRealWidth();
                        if (thisWidth > maxWidth) {maxWidth = thisWidth+10;}
                        }

                $('#' + gridName + ' .jqgfirstrow td:eq(' + elementsPerChunk + '), #' + gridName + '_' + columnNames[elementsPerChunk].name).width(maxWidth).css('min-width', maxWidth+17);
                $('#' + gridName + ' .jqgfirstrow td:eq(' + 0 + '), #' + gridName + '_' + columnNames[0].name).width('30').css('min-width', '30px');
                //grid.setRowData ( iids[itm], false, {height: 30} );

                }
        }, 0);
        }

Answer 1

Try to keep in mind that JavaScript is entirely browser sided. Each browser will respond differently when it thinks your code times out. Furthermore, you can't bypass these errors. A great example would be chromes option to "stop this website from displaying anymore pop-ups." These features are added for the convenience of the end user and usually fix security holes or inform the user that the website is simply taking a while (which most users don't like)

One idea is to find a way to split up the amount of data you process. it seems like the issue, as you stated, is with large amounts of data. Is there a way to split the data up into "pages" and process, say, 50 items at a time?

If you can create stop points while it's updating that would work as well. The browser locks up while JavaScript runs which is a big part of the problem.

Finally, consider processing data on the server side and sending/receiving it with Ajax. This will let the browser/user work while your code is processed elsewhere and only stops to receive new data.

EDIT:

To address your comment:

Using math you could use nested for-loops to split the processing load into chunks of 50:

var numOfElements = /*how ever you count the records*/;
var elementsPerChunk = 50;
var numOfChunks = numOfElements / elementsPerChunk; //divide it into chunks

for (x = 0; x < numOfChunks; x++) {
    //Set Time out
    for (y = 0; y < elementsPerChunk; y++) {
        //Rest of code
    }
}

Note:

The above isn't perfect, for instance, you have to run the loop 1 more time to account for any sets of records that is not evenly divisible by 50 but you do not want to loop again if it is divisible by 50 (probably us mod operator to determine if there is a remainder and then add 1 if there is).