Question

I have a function running on document load that copies the contents of a select object to other select boxes (to conserve network bandwidth).

The function is taking a few seconds to complete, so I wanted to mask the main div (to give the user the idea that something is happening).

Unfortunately, the mask is not showing up until after the function completes:

    // I want the mask to show immediately here, but never gets shown
    $('#unassignedPunchResults').mask('Getting results');

    $('.employeeList').each(function (i) {
        // this is freezing the browser for a few seconds, the masking is not showing
        $('#employeeList option').clone().appendTo(this);  
    });

    $('#unassignedPunchResults').unmask();

How can I interrupt the javascript after the mask() call to flush that event and continue, so the user can see the mask while the longer processing (the each()) processes?

Answer 1

Put the rest of the code in a setTimeout(function() { ... }, 0) call.