在完成前一个请求之前中止新的 AJAX 请求

IT技术 javascript ajax jquery
2021-02-24 11:20:31

我有一个函数可以在输入更改时运行 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>
5个回答
 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
    }
});
啊，没有。在将对象分配给之前beforeSend执行。因此，先前的调用在那里中止。- 总是欣赏评论好的答案jqXHRcurrentRequest
2021-04-21 11:20:31
这个解决方案在 GET 类型中对我不起作用。没有用POST检查。
2021-04-30 11:20:31
奇迹般有效。对于它不起作用的人，也许您在进行 ajax 调用的函数内部初始化 currentRequest=null 时犯了一个错误，请尝试在函数外部初始化它。我犯了那个错误;)
2021-05-05 11:20:31
响应处理程序 (success和error)不应该都设置currentRequest回null?
2021-05-11 11:20:31
虽然此代码可能会回答问题，但提供有关它如何以及为何解决问题的附加上下文将提高答案的长期value。
2021-05-11 11:20:31 
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()在需要时调用

那比我想象的要容易。我为任何感兴趣的人创建了这个工作的小提琴：jsfiddle.net/YzDBg/4。谢谢。
2021-04-16 11:20:31
你能详细解释一下吗？
2021-04-30 11:20:31

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

使用 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% 正确！）

if(typeof window.ajaxRequestSingle !== 'undefined'){
  window.ajaxRequestSingle.abort();
}

window.ajaxRequestSingle = $.ajax({
  url: url,
  method: 'get',
  dataType: 'json',
  data: { json: 1 },
  success: function (data) {
    //...
  },
  complete: function () {
    delete window.ajaxRequestSingle;
  }
});

试试这个代码

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;
    }
};
其它你可能感兴趣的问题
上一篇按下回车键时如何提交表单？ 下一篇Service Worker 的存储限制是多少？