Screen blocker on long-running script

I have a simple html page containing a large table with more than 2000 rows. I have jQuery code written for searching and sorting in that table. It takes quite some time for searching and sorting (which is understandable).

What 开发者_运维百科I want is to have a screen blocker in place when script is searching or sorting the table. This behavior is observable on AJAX calls on many websites that can be achieved by implementing onAjaxBegin and onAjaxComplete events of jQuery.

Is there any such method that can be used to put a screen blocker for long running script. if not, what is the alternative?

I would recommend breaking it up and iterate with setTimeout.

For example, instead of:

function example1() {
    for (var i = 0; i < 1000; i++) {
        // SOME CODE
    }
}

You could write:

function example2() {
    var i = 0;
    helper();
    function helper() {
        // SOME CODE
        if (++i < 1000) {
            setTimeout(helper, 0);
        }
    }
}

You don't have to have every iteration in different callback. You could convert 1000 iterations in 1 function call to 10 iterations per function call in 100 function calls or something that would be most suitable in your case. The idea is to not block the user interface for so long that the user will notice.

Another idea would be to use Web Workers if you can but this will not work on older browsers (which may or may not be a problem for you, if you're writing a browser extension or you know what your users will use, etc.).

If you do it the way you explained in your question then you will make the browser completely unresponsive during your calculations and you will most likely trigger a "slow script - do you want to kill it?" kind of warning.

jQuery blockUI will block elements or the page and is very customizable.