Bootstrap按钮的“加载”动画在最后工作

Question

I have a button that calls an Ajax function and show users' info in some textarea

HTML:

<button id="btnUsers" class="btn btn-primary pull-left btn-lg" onclick='navUsers.getUsers();' data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">  Get Users   </button>
<textarea id="resultUsers" name="resultUsers" cols="100" rows="18" class="form-control"></textarea>

JS:

var navUsers = new function (){ 
    this.getUsers = function(){
       $("#btnUsers").button('loading');
       $.ajax({ //ajax stuff, shows users in the textarea })
    };
};

The problem is: the button's 'loading' animation only starts after the Ajax stuff is finished, not before. I've tried some 'modal' bootstrap div for showing mensajes while loading users and same happens. Also I've tried the beforesend option in Ajax, same results.

Answer 1

var navUsers = new function (){ 
    this.getUsers = function(){
       $("#btnUsers").button('loading');
       setTimeout(function() {
          $.ajax({ 
            //ajax stuff,
            success:function(){
            $("#btnUsers").button('reset');
          }
       })
    }, 1000);

    };
};