Question

I have a javascript function that filter dom elements based on a input text changes, so:

$(".input").keyup(function(e) {
    filter();
});

var cache = $(".dom");

var filter = function() {
     cache.each(function() {
         // if field contains some text show else hide
     }
};

My problem happens when there are many dom elements to filter, the whole pages gets inaccessible because of the synchronous processing (like the example above). Im trying to come out with a solution that dont locks the entire page with synchronous processing.

The problem is NOT related to the filter logic (it’s completely trivial), it’s NOT related to the jquery or javascript itslef, it’s related to the synchronous processing and the quantity of dom elements.

Answer 1

You can update large set of dom nodes by placing them in a queue and process only a few elements on each setTimeout “tick”. In pseudo-code:

on(event):
   queue = DOM nodes to be updated
   setTimeout(update)

update:
    queue.slice(0, limit).each(...update a node...)
    queue = queue.slice(limit) // remove processed nodes
    if (queue.length > 0) setTimeout(update) // repeat...

See http://jsfiddle.net/Etsmm/2/ for a complete working example.

Upd: The first version had problems with Chrome (related to its’ “display” bug), adding a fix as per this answer appears to have done the trick.