abort previous ajax call on event

Question

the problem is that when I click on .personalized class it does not have both #loading_personalized and #divPersonalized so it takes the AJAX call ..and as soon as I click again on .personalized in time the id #loading_personalized is showing up it hides but the previous AJAX call is not cancelled yet so it executes and shows #divPersonalized , but I want that at the time the #loading_personalized is showing up and I click on .personalized the previous AJAX call should also cancel.. here is my code......

 $(document).ready(function(){

         $(".Personalized").click(function(){



if($("#divPersonalized").is(':visible')){

    $('#triangle-personalized').hide();
    $("#divPersonalized").hide();
}

else if($('#loading_personalized').is(':visible'))
{
    $('#loading_personalized').hide();
               //if this event is true, abort previous ajax call here

}

else {


$.ajax({

    type:"POST",
    url:"personalized.php",
    cache:false,
    beforeSend: function(){
        $('#loading_personalized').show();
        $('#triangle-personalized').show();
    },

    complete: function(){
        $('#loading_personalized').hide();

    },
    success: function(html){


        $("#divPersonalized").html(html).show();
    }


});
}       
  });

Answer 1

You need to store jQuery ajax object and then call abort()

myAjaxCall = $.ajax({
    type:"POST",
    url:"personalized.php",
    cache:false,
    beforeSend: function(){
       $('#loading_personalized').show();
       $('#triangle-personalized').show();
    },

    complete: function(){
        $('#loading_personalized').hide();
    },
    success: function(html){
        $("#divPersonalized").html(html).show();
    }
});


if($('#loading_personalized').is(':visible'))
{
    $('#loading_personalized').hide();
    myAjaxCall.abort();
}