在新请求中取消先前的ajax请求
我有一个函数,在input的变化上运行ajax调用。
但是,在前面的ajax调用完成之前,有可能会再次触发该函数。
我的问题是,如何在开始新的ajax调用之前中止以前的ajax调用? 不使用全局variables。 (请参阅这里回答一个类似的问题)
我目前的代码jsfiddle :
使用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>
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 } });
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);
保存在一个variables中,然后在发送第二次之前,检查它的readyState
并在需要时调用abort()
试试这个代码
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; } };