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>
Advertisement
Answer
var currentRequest = null; currentRequest = jQuery.ajax({ type: 'POST', data: 'value=' + text, url: 'AJAX_URL', beforeSend : function() { if(currentRequest != null) { currentRequest.abort(); } }, success: function(data) { // Success }, error:function(e){ // Error } });