How to make jQuery selector run faster or run it in chunks

Question

I have a simple jQeury code that runs on a web page that has more than 50,000 lists of people. On IE I get the message that a script is taking too long. I would like to get rid of that annoying popup in IE.

If I need to add 50,000 DOM elements then I could use timer to defer work in chunks. I am not sure if timer would be of any help in this case when I am selecting from the large chunk of data.

my jquery code is

$('#all_member').click(function(){
    $("#people_form input:checkbox").attr('checked', true);
    return false;
});

Answer 1

I think what you really need to do is to find a way on how to reduce that 50,000 number.

Answer 2

If you insist on your 50,000 elements, then I assume that this is not a public web.

In that case, you can demand all of your users to have Google Gears installed. With Gears you can delegate javascript execution to a component "behind" the browser which means that (probably) you won't get that IE message.

Answer 3

1. Like everyone said, you probably don't need 50,000 checkboxes on the same page
2. If you want to work with chunks, specify the chunk in the selector:

$('#people_form input:checkbox:gt(chunk_start):lt(chunk_size)')

A more complete example (you still need to use setTimeout to avoid the popup):

var CHUNK_SIZE = 4000;
var TOTAL = 50000;
for (var i = 0; i < TOTAL; i += CHUNK_SIZE) {
  var chunk_suffix = ':gt(' + i + '):lt(' + CHUNK_SIZE + ')';
  $('#people_form input:checkbox' + chunk_suffix).attr('checked', true');
}