Abort Ajax requests using jQuery

Using jQuery abort() you can cancel a running AJAX request forcefully before it ends as this hits several times within a short time period.

This is usually in cases where the user might perform an action, based on AJAX request several times within a short time period.

For example,

There is a auto-complete functionality for a search box, where user finds related search items based on their current input by making an AJAX request each time they press a key in the search text field.
So, in this situation if user tries to find by typing faster then you AJAX request then the request can be performed properly.

Therefore, you need to abort non-finished requests before starting the new AJAX request.

Example to abort ajax requests:

<script type="text/javascript">
var xhr = null;

function showSuggestion()
{
if(xhr != null){
xhr.abort();
}

xhr = $.get("ajax-master.php", function(data, status)
{
console.log(data);
});
}
</script>

In this situation, we have defined a common variable for containing the request reference. So before we call any AJAX request, we check to see if it is null or not. If it is not null then we call the abort() method on it. So several times hitting the AJAX request it only executes the callback function once.

Jacob Frazier

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.