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.