Action indicator during JQuery each() function

Question

How to do simple action indicator during execution of JQuery each(), is this possible? I have some problems with my JQuery code, i don't understand the behavior of it :/ I am new to JQuery.

js code look like this:

$(function () {
     $('#offer_discount').keyup(function () {

           //here i try to show my hidden div with action indicator
           $('#mask').show();

           $('#search-result').find('tr').each(function (index) {
                // do some calc
           });

           // here i try to hide my div with action indicator
           $('#mask').hide();
     });
});

it didn't work properly, hidden div shows at the end of calculations. Anybody can help?

Answer 1

No UI updates are visible while a Javascript code block is running. You have to return control to the browser before the change is displayed. You can do this using a setTimeout call with a zero time, so that the browser draws the update and then starts the rest of the code:

$(function () {
  $('#offer_discount').keyup(function () {

    //here i try to show my hidden div with action indicator
    $('#mask').show();

    window.setTimeout(function() {

       $('#search-result').find('tr').each(function (index) {
            // do some calc
       });

       // here i try to hide my div with action indicator
       $('#mask').hide();

    }, 0);

  });
});