[jQuery] Browser Hangs while hiding 2K+ table rows
I've been converting a legacy web app to use JQuery. I've now cleaned
it up so that my HTML validates and I have instrumented the code with
classes and id's as appropriate. This app is essentially a table that
displays the status of jobs for Autosys.
The problem that I'm having is that when I hide the entire list, the
browser hangs for several minutes.
There are sometimes over 2000 rows. I have cached the full resultset
into a variable, though I'm not sure how helpful this is.
In the code below, the initial setting of $allRows doesn't take much
time at all, but when I hit the hide() line, the browser hangs for
waaaay too long. interestingly, if I comment out the hide() command,
and then manually issue a comand like $allRows.css("color", "red"); it
works in a very reasonable amount of time.
$(function() {
$allRows = $("tbody>tr");
$allRows.hide();
}
Also, if I let it run once to completion and all of the rows are
hidden, then I can show() them and hide() them in reasonable time.
Is it something with my selector?
Thanks, folks.
Eric