Aborting previous ajax request

jQuery, 2016-01-15 22:17:14 UTC

Aborting previous ajax request often occure when creating an autocomplete search box. In other case, occure when you want to cancel uploading a file to the server.

I wan to show you how to do that.

First, let see what is ajax do when you fire an ajax;

var lol = $.ajax({
    url: '/api/v1/search?q=something'


When you open up your developer console, you can see like this;


Now We know that ajax has an abort method. We can use it to cancel previous ajax call.

Then now I will show you a complete sample about aborting search autocomplete request;


function inputChange() {
    var theRequest = null; 
        theRequest = $.ajax({
            url: '/api/v1/search?q='+$('#search_input').val(),
            beforeSend: function() {
                if(theRequest != null) {
            success: function(response) {
                // response here

Easy right? :)