How to style incrementally with JavaScript?

So I am using jQuery and I have a rather large table for what I want to do (> 100 rows). For every row, I'd like to do quite a bit of work on it, my question is if I have

$('#tableid>tr').each(function(i){some code here});

How do I stop processing when I hit multiples of 5 and just put the 开发者_开发百科effects out on the browser first so the user can interact with it rather than freezing.

Thanks a lot!

Jason

Try it out: http://jsfiddle.net/5E3gs/

var $trs = $('#tableid tr');

for(var i = 0, len = $trs.length; i < len; i = i + 5) {
    (function(i) {
        setTimeout(function() {
           $trs.slice(i,i + 5).addClass('yellow');
        }, (500 * (i / 5)));
    })(i);
};

Hmm strange. What about using setTimeout to recursively call your function?

It's not on multiples of 5, but you could use setTimeout to queue the events and let the user interact with the page as the events fire.

Something like:

$('#tableid>tr').each( function(i, e){ setTimeout( function(){ OtherFunc(e); }, (100 * i) ) } );

function OtherFunc(e) {
    /* processing code */
}

Adjust the parameters (especially the 100ms increments) as necessary, but you get the idea.

for(var i=0 ; i<$('#tableid>tr').length ; i+=5){
   var sliceEnd = i+4 > $('#tableid>tr').length-1 ? $('#tableid>tr').length-1 : i+4;
   $('#tableid>tr').slice(i,sliceEnd).each(function(i){some code here});
}

Should do the trick.