Question

i have a each loop like below

$('#goldBarList tr:not(:eq(0))').filter(':has(:checkbox:checked)').each(function() {  
    $(this).remove();  
});

as i have 4000 rows and each row has a checkbox. I need to remove those rows having their checkbox checked.
However, the browser is giving stop running this script error?
because this loop is taking more time to finish.
so i just want to use setTimeout after 10 iterations and continue the loop after 0.5sec..
means i want the loop to sleep for 1/2sec after every 10 iterartions..
please give me some code reference…

Thanks…

Answer 1

What it seems you’re really looking for is to be able to remove those elements without the browser timing out. Splitting the calls up using window.setTimeout does the trick, even if the timeout is 0. The code below does this in batches of 500.

EDIT: Updated to improve performance. (Thanks Bergi.)

var removeTds = function($el) {
    var elements = $el.filter(":lt(500)"),
        count = elements.length;

    elements.remove();
    $el = $el.filter(":gt(499)");
    if (count === 500) {
        window.setTimeout(function() {
            removeTds($el);
        }, 0);
    }
};

removeTds($('tbody tr:not(:eq(0))').filter(':has(:checkbox:checked)'));

Here’s the fiddle.