javascript function call after process execution

I am facing issue regarding javascript. Onclick of button a call a function


function onButtonClickFunction()

{

    ajaxCall();

}


function ajaxCall()

{

    $('.black_overlay').show();


    /* Some Ajax Code */


    $('.black_overlay').hide();

}

So here I am facing the issue is, When I call the ajaxCall function, ideally overlay should be appear, But this will appear and hide at the end of the Ajax response.

There is no error in the console. And when check with the breakpoints then this function sequentially works.

I really didn’t come to know, where should be the problem. What should I check for this?

Any help would be appreciated.

Thanks!

Your ajax code is likely asynchronous. The request is started but the program continues running before it’s finished.

In that case you’d need to hide the overlay upon completion of the request.

Thanks for your response.

But the problem is not with the hiding. Problem is with the appearing overlay. I want to appear overlay as the ajaxCall function called, but it appears, after Ajax response.