Overlay layer shown for ajax calls but not when called without ajax

Question

I have a "loading" overlay that I show when I make ajax calls. This works fine. The overlay is defined in css as:

.loading{
    position:fixed;
    z-index:1010;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: rgba( 255, 255, 255, .9 )
                url('http://url to image') 
                50% 50% 
                no-repeat;              
}

And it is called in a js function as

function showLoading()
{
    $("#layer").addClass("loading"); 
}

Once the ajax call returns I call a hideLoading() which hides the layer. All this works fine.

Now I have a button on the click on which I do a client side process intensive calculation, at the end of which I load additional content into the DOM. This function is say calcDataPoints(). I want it so that when someone clicks the calc button, I show the overlay, do the calculation and update the DOM and then hide the overlay.

So I do:

showLoading();
calcDataPoints();
hideLoading();

The problem is that the overlay never gets rendered. It shows for a microsecond when the calc has "completed" and not "before". So it does not have the desired effect.

What am I doing incorrectly here? How can I have the overlay shown before the calc begins and close it once the calc is over and I have written data into the DOM?

Any pointers are greatly appreciated!

Suggest looking at [this](http://stackoverflow.com/questions/5187968/how-should-i-call-3-functions-in-order-to-execute-them-one-after-the-other) answer. — sandeep s, Dec 03 '15 at 05:41

score 1 · Answer 1 · answered Jun 30 '16 at 21:21

1

call like that:

setTimeout(showLoading, 10);
setTimeout(calcDataPoints, 2000);
setTimeout(hideLoading, 2000);

In this way we can call function like asynchronously .

answered Jun 30 '16 at 21:21

Hassan Ali Shahzad

2,439
29
32

Overlay layer shown for ajax calls but not when called without ajax

1 Answers1