Спин эффект не работает во время вызова Ajax

Question

У меня есть следующий код .. Но спиновый эффект не происходит, пока вызов Ajax не закончен (что в значительной степени бесполезно)

$.ajax({ 
     type:"GET", 
     async:false, 
     url: "../../xxxxx/AvailabilityServlet", 
     data: {action: "xxx", sku: sku}, 
     beforeSend: function(xhr) { 
     $("#submiticon").removeClass("fa-search"); 
     $("#submiticon").addClass("fa-spinner fa-spin"); 

    } 
}) 

.done(function(data) { 
     result = data 
    }) 

    .fail(function(data) { 
     result=null 
    }) 

    .always(function(data) { 
     $("#submiticon").addClass("fa-search"); 
     $("#submiticon").removeClass("fa-spinner"); 
     $("#submiticon").removeClass("fa-spin"); 
    }) 

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

$.ajax({ 
      type:"GET", 
      async:false, 
      url: "../../xxxxx/AvailabilityServlet", 
      data: {action: "xxx", sku: sku}, 
      beforeSend: function(xhr) { 
      $("#submiticon").removeClass("fa-search"); 
      $("#submiticon").addClass("fa-spinner fa-spin"); 
      alert("stop") ; 
     } 

JSP:

<div class="col-md-4"> 
    <form role="form" class="ng-pristine ng-valid"> 
    <div class="input-group col-md-6" > 
     <input type="text" class="form-control" id="skuInput" placeholder="Sku" autocomplete="off" > 
     <span id="submit" class="input-group-addon"><span id="submiticon" class="fa fa-search"></span></span> 
    </div> 
    </form> 
</div> 

$("#submit").click(function(){ 
searchSku() 
}); 

Answer 1

Удалить async:false из вашего $.ajax вызова. Вы делаете его синхронным, а не асинхронным (A в AJAX) и висящим браузером, пока он ждет ответа.