How to Cancel/abort Previous ajax Request in jQuery

TL;DR

article explains how to avoid slowing down your web app by canceling or aborting previous AJAX requests. It provides a code snippet that assigns the current AJAX request object to a variable and checks if it’s complete before initiating a new request, thus aborting the previous one. The article also includes a solution for ignoring the “abort” error that occurs when a previous request is canceled.

jQuery AJAX is the most common way to deal with AJAX requests these days. You can send as many Ajax requests as you like but there are many cases in which sending too many or frequent Ajax requests is not suitable and best avoided.

For example, let’s say you have developed a certain search functionality that fetches result data using AJAX. The search query string is the value of the input field bound with the Ajax function and is triggered on the keyup event on the input field. In this case, if the user has to enter a query string of let’s say 8 characters, this will mean that there’ll be at least 8 keyup events triggered, which further means that there’ll be at least 8 Ajax calls. This will definitely lead to a slowing of the whole app and is unreasonable as well.

The solution here is to only focus on the query string after the user has finished typing i.e. the last keyup event. So, for this, you have to cancel or abort all the previous Ajax requests.
Let’s say that the input field is as follows:

[PHP]

[/php]

Now, we have to write the code for the Ajax function which will be triggered on the key up event and will also abort the previous Ajax calls if any. So, our code for such a function will be as:

$(document).ready(function() {
	var ajaxReq = 'ToCancelPrevReq'; // you can have its value anything you like

	$("#search").keyup(function() {

		var queryString = $("#search").val();

		if (queryString == '') return; //You can always alter this condition to a better one that suits you.

		ajaxReq = $.ajax({
			url: YourPostURL, //Don't forget to replace with your own post URL
			type: 'POST',
			data: {
				'query': queryString
			},
			dataType: 'JSON',
			beforeSend: function() {
				if (ajaxReq != 'ToCancelPrevReq' & amp; & amp; ajaxReq.readyState & lt; 4) {
					ajaxReq.abort();
				}
			},
			success: function(json) {
				console.log(json);
			},
			error: function(xhr, ajaxOptions, thrownError) {
				if (thrownError == 'abort' || thrownError == 'undefined') return;
				alert(thrownError + "rn" + xhr.statusText + "rn" + xhr.responseText);
			}
		}); //end ajaxReq

	}); //end keyup

}); //end document.ready

The condition:

if(thrownError == 'abort' || thrownError == 'undefined')