stop ajax in his execution

Question

everyone,

I'm trying to stop the execution of an ajax function in Jquery. currently this ajax call, it returns a list of images, what I want is to stop the execution of the image return as soon as I press a button. I'm trying to use the abort() function but it doesn't stop the requests I've already sent and finally it returns all the images. what can you advise me?

ajaxCall =$.ajax({
type: 'POST',
url: "/loadImage",
data: {file:element.file},
success: function(respo) {                                    
   if(element.file.split(".").pop()=="pdf"){
      $('#contentTable').append(`<div class="icono" ondblclick="MostrarImagenModel(${index})" data-type="document" data-value="${element.name}" data-val="${index}"><figure><img src="/bootstrap-3.3.6-dist/bootstrap-3.3.6-dist/css/ic_picto_pdf.svg"><figcaption>${element.name}</figcaption></figure></div>`);

   }else if(element.file.split(".").pop()=="mp4"){
      $('#contentTable').append(`<div class="icono" ondblclick="MostrarImagenModel(${index})" data-type="document" data-value="${element.name}" data-val="${index}"><figure><img src="/bootstrap-3.3.6-dist/bootstrap-3.3.6-dist/css/picto_video.svg"><figcaption>${element.name}</figcaption></figure></div>`);

   }else{
      $('#contentTable').append(`<div class="icono" ondblclick="MostrarImagenModel(${index})" data-type="document" data-value="${element.name}" data-val="${index}"><figure><img src="${respo.src}"><figcaption>${element.name}</figcaption></figure></div>`);
   }
   filesContent[filesContent.length-1].content.push({index:index, name: element.name, file:element.file,  src: respo.src})
   index++;
}
});

//onclick function part
if(ajaxCall){
   console.log("hay ajaxCall");
   ajaxCall.abort();
}