在ajax调用期间旋转效果不起作用 [英] Spin effect not working during ajax call

问题描述

我有以下代码..但是旋转效果直到ajax调用完成才发生(这几乎没有用)

I have the following code.. But the spin effect doesn't happen until the ajax call is finished (which is pretty much useless)

$.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");
  })

但是，如果我添加了警报，它将引发警报，然后旋转效果开始显示.

But if I add an alert, it throws the alert and then the spin effect starts showing up.

$.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()
});

推荐答案

从您的$.ajax调用中删除async:false.您正在使它成为同步而不是异步(AJAX中的A)，并在等待响应时挂起浏览器.

Remove async:false from your $.ajax call. You are making it synchronous instead of asynchronous (the A in AJAX) and hanging the browser while it waits for a response.

这篇关于在ajax调用期间旋转效果不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！