javascript - Aborting / canceling running AJAX calls before execute new AJAX in JS -

i've never done type of manipulation of ajax calls (to stop/abort/cancel or ignore? running ajax calls before execution of new one) before don't understand how , appreciate direction.

i have page in app make number of ajax calls fill dynamically data in table (object name, object fit, object progress) when page loads. example, there 5 rows in table. call

$.post("/getfit", {objectid: objectid}, function (result) { manipulation result  }  

and

$.post("/getprogress", {objectid: objectid}, function (result) { manipulation result  } 

5 times each in loop -- 1 each of objects.

the first column of table has links more detail on object, , clicking on them call ajax:

 $(document).off('click', '.js_object').on('click', '.js_object', function (e) { var objectid = $(this).attr("id")          $.post("/viewobject", {objectid: objectid}, function (result) {document.getelementbyid("main_window_content").innerhtml = result;   });     }) 

the problem browser not render results of last ajax call (/viewobject) until has received results of of previous calls (/getfit x5 , /getprogress x5).

as result, user wants drill detail on object needs wait until ajax calls other objects complete before see anything.

so struggle how stop/abort/cancel (or ignore?) "/getprogress" , "/getfit" can execute "/viewobject" , view results of it.

i appreciate help.

use xhr.abort() kill xhr requests shown in below code in js. believe there ajax.abort(); in jquery

 var xhr = $.ajax({     type: "post",     url: "xxx.php",     data: "name=marry&location=london",     success: function(msg){        alert( "the data saved: " + msg );     } });  //kill request xhr.abort()