Вызовите функцию javascript асинхронно для отображения наложения

---

У меня есть следующий html-макет

<div class='cm-body'>
<div class='cm-content'>
<div class='cm-item-list'>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
<div class='cm-item'><span>somedata</span></div>
</div>
</div>
<div class='cm-overlay'>
<div class='cm-overlay-content-wrapper'>
<div class='cm-overlay-image'><img src='path-to-preloader' class='cm-overlay-preloader-image'></div>
<div class='cm-overlay-text'><span class='cm-overlay-preloader-text'>Please wait Loading data....</span></div>
</div>
</div>
</div>

.cm-overlay{
display:none;
position:fixed;
width:0px;
height:0px;
}

.cm-overlay-hide {
display:none;
}

.cm-overlay-show{
display: block;
position: fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
opacity:0.8;
background-color: #c5c5c5;
z-index: 100;
width: 100%;
height: 100%;
}

.cm-overlay-content-wrapper{
background-color: #ffffff;
display: block;
position: relative;
min-width: 300px;
min-height: 300px;
margin: 0 auto;
width: 50%;
height: 50%;
top: 10%;
opacity:1;
}

.cm-overlay-image{
display: block;
position: relative;
margin: 0 auto;
height: 65%;
}

.cm-overlay-preloader-image{
display: block;
position: relative;
width: 125px;
top: 50px;
margin: 0 auto;
border:0px;
}

.cm-overlay-text{
display: block;
position: relative;
height: 35%;
}

.cm-overlay-preloader-text{
display: block;
position: relative;
text-align: center;
font-family: Oswald;
font-size: 30px;
}

Я вызываю эту функцию, чтобы либо скрыть, либо показать наложение при щелчке. Но так как он не получает отображается на всех. Я думаю, это потому, что он вызывается в том же потоке.

function toogle_overlay(isShown) 
{
   try 
   {
        var overlay = $(document).find('.cm-overlay');
        if (isShown != undefined && overlay != undefined) 
        {
           if (isShown === true) {
               $(overlay).addClass('cm-overlay-show').removeClass('cm-overlay-hide');
              }
              else
              {
               $(overlay).addClass('cm-overlay-hide').removeClass('cm-overlay-show');
              }
          }
        }
   catch (err) 
   {

   }
}

Когда я нажимаю на кнопку, Я хочу показать наложение до тех пор, пока запрос веб-службы не завершится успешно. При успешном выполнении снимите накладку.
Как мне этого добиться?
Пожалуйста, посоветуйте.

Что я уже пробовал:

Я попробовал XMLHTTPRequest вызвать функцию js асинхронно

---