在新请求中中止先前的ajax请求

Question

我有一个函数,在输入更改时运行ajax调用.

但是,在前一个ajax调用完成之前,有可能再次触发该函数.

我的问题是,在开始新的ajax调用之前,我将如何中止之前的ajax调用？不使用全局变量.(请参阅此处对类似问题的回答)

我当前代码的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>

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

保存在变量中,然后在发送第二次之前,检查它readyState并abort()在需要时调用

Answer 3

已接受答案的变体并从对问题的评论中采用 - 这对我的应用程序很有用....

使用 jQuery 的 $.post()....

var request = null;

function myAjaxFunction(){
     $.ajaxSetup({cache: false}); // assures the cache is empty
     if (request != null) {
        request.abort();
        request = null;
     }
     request = $.post('myAjaxURL', myForm.serialize(), function (data) {
         // do stuff here with the returned data....
         console.log("returned data is ", data);
     });
}

根据需要多次调用 myAjaxFunction()，它会杀死除最后一个之外的所有内容（我的应用程序上有一个“日期选择器”，并根据所选日期更改价格 - 当有人在没有上述代码的情况下快速点击它们时，它是抛硬币看他们是否会得到正确的价格。有了它，100% 正确！）