Question

recently I’ve encountered a problem with IE. I have a function

function() {
    ShowProgress();
    DoSomeWork();
    HideProgress();
}

where ShowProgress and HideProgress just manipulate the ‘display’ CSS style using jQuery’s css() method.

In FF everything is OK, and at the same time I change the display property to block, progress-bar appears. But not in IE. In IE the style is applied, once I leave the function. Which means it’s never shown, because at the end of the function I simply hide it. (if I remove the HideProgress line, the progress-bar appears right after finishing executing the function (more precisely, immediately when the calling functions ends – and so there’s nothing else going on in IE)).

Has anybody encountered this behavior? Is there a way to get IE to apply the style immediately?

I’ve prepared a solution but it would take me some time to implement it. My DoSomeWork() method is doing some AJAX calls, and these are right now synchronous. I assume that making them asynchronous will kind of solve the problem, but I have to redesign the code a bit, so finding a solution just for applying the style immediately would much simplier.

Thanks rezna

Answer 1

Synchronous requests block the entire UI, which is horrible. You are right in your assumption, but if you want to continue down this path to the inner circles of $hell, try this:

function () {
    ShowProgress();
    window.setTimeout(function () {
        DoSomeWork();
        HideProgress();
    }, 0);
}

Note that I have not tested this. Try playing with the time-out value (currently 0) if you still do not see anything.