I have a function that runs an AJAX call on the change of an input.

But, there is a chance that the function will be fired again before the previous ajax call has completed.

My question is, how would I abort the previous AJAX call before starting a new one?
Without using a global variable. (See answer to a similar question here)

JSFiddle of my current code:

Javascript:

var filterCandidates = function(form){

    //Previous request needs to be aborted.

    var request = $.ajax({

        type: 'POST',

        url: '/echo/json/',

        data: {

            json: JSON.stringify({

                count: 1

            })

        },

        success: function(data){

            if(typeof data !== 'undefined'){

                jQuery('.count').text(data.count)

                console.log(data.count);

            }

        }

    });

};



if(jQuery('#search').length > 0){

    var form = jQuery('#search');

    jQuery(form).find(':input').change(function() {

        filterCandidates(form);

    });

    filterCandidates(form);

}

HTML:

<form id="search" name="search">

    <input name="test" type="text" />

    <input name="testtwo" type="text" />

</form>

<span class="count"></span>