在新的請求中取消先前的ajax請求

但是，在先前的ajax調用完成之前，有可能再次觸發該函數。

我的問題是，如何在開始新的ajax調用之前中止先前的ajax調用？不使用全局變量。（見回答類似的問題here）

的我當前的代碼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>

來源

2013-10-08 CharliePrynn

這裏是這裏更好的解決方案是一個更好的解決方案HTTP： //www.thecave.info/how-to-abort-a-previous-ajax-request-in-jquery/ – semira

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

來源

2014-11-04 12:31:54

不應該都響應處理程序（'success'和'error'）將'currentRequest'設置回'null'？ – CoDEmanX

OP詢問'我將如何中止先前的ajax調用'。但是在這裏，你正在放棄currentRequest'，這是最新的。因此，前一個將執行，新的請求將被中止。對？ – Blauhirn

啊，不。 *'jqXHR'對象被分配給'currentRequest'之前'正在執行'beforeSend'。因此，先前的呼叫在那裏中止。 - 總是欣賞備受好評的答案 – Blauhirn

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

保存在一個變量中，然後，發送第二次之前，檢查其readyState，如果需要

來源

2013-10-08 09:52:22 Romko

這比我想象的容易。我已經創建了這個工作的小提琴：http://jsfiddle.net/YzDBg/4/對任何有興趣的人。謝謝。 – CharliePrynn

請你詳細解釋一下嗎？ – SSS

調用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; 
    } 
};

來源

2013-10-08 10:00:17

在新的請求中取消先前的ajax請求

回答

相關問題