Abort Ajax requests using jQuery

jQuery scroll to element

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.

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.

You may like:  Difference between jQuery's replaceWith() and html()

One thought on “Abort Ajax requests using jQuery”

  1. After looking over a handful of the articles on your web site, I really appreciate your way of writing a blog.
    I book marked it to my bookmark list and will be checking back soon.

Leave a Reply

Your email address will not be published. Required fields are marked *