Przerwij poprzednią prośbę ajaxową na nową prośbę

Question

Mam funkcję, która uruchamia wywołanie ajax na zmianę danych wejściowych.

Ale jest szansa, że ​​funkcja zostanie uruchomiona ponownie przed zakończeniem poprzedniego połączenia ajax.

Moje pytanie brzmi: jak przerwać poprzednie połączenie ajax przed rozpoczęciem nowego? Bez użycia zmiennej globalnej. (Patrz odpowiedź na podobne pytanie here)

jsfiddle mojego aktualnego kodu:

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> 

Answer 1

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 
    } 
}); 

Answer 2

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); 
      } 
     } 
    }); 
    return request; 
}; 

var ajax = filterCandidates(form); 

zapisać w zmiennej, a następnie, przed wysłaniem raz drugi, sprawdzić jego readyState i nazywają abort() razie potrzeby

Answer 3

Spróbuj kod

var lastCallFired=false; 

var filterCandidates = function(form){ 

    if(!lastCallFired){ 
    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); 
      } 
     } 
    }); 
     setInterval(checkStatus, 20); 

    } 

}; 

if(jQuery('#search').length > 0){ 
    var form = jQuery('#search'); 
    jQuery(form).find(':input').change(function() { 
     filterCandidates(form); 
    }); 
    filterCandidates(form); 
} 

var checkStatus = function(){ 
     if(request && request.readyState != 4){ 
      request.abort(); 
     } 
    else{ 
     lastCallFired=true; 
    } 
};