how to style incrementally with javascript?

Question

Hi all,

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

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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);
};