在 ajax 成功回调上停止 ajax 加载程序

Question

I am using ajax loadmore pagination which works fine on localhost, but I am considering my method not applicable to live host. This is what i am doing:

     $(".button").click(function(){
       setTimout(function(){
         $('#loader').show();
         $.ajax({
           //ajax stuffs
           success:function(data){      
             $("loadmore").append(data).
           }
         });
       } ,2000);
     });

Technically speaking to me this is just taking 2 seconds to do what is inside the setTimeout function which is not right for user experience on the live server as ajax would be calling after 2 seconds.

What I want:

Let ajax call be made while the loader icon is loading. once the call is made successfully then the loader icon should stop and loadmore data should be appended.

Something like this:

$(".button").click(function(){
   $("#loader").show()
   $.ajax({
     //ajax stuffs
     success:function(data){      
     }
   });
   if(success is finished){
     $("#loader").hide()
     $("#loadmore").append(data)
   }
 });

Please how can I achieve that, thanks

Answer 1

Would this work for you?

$(".button").click(function(){
  $("#loader").show()
  $.ajax({
    //ajax stuffs
    success:function(data){      
    }
  })
  .done(function (data) {
    $("#loader").hide();
    $("#loadmore").append(data);
  }).fail(function (jqXHR, textStatus) {
      // do something
  })
});