在返回之前取消一个jQuery AJAX调用?

前端之家收集整理的这篇文章主要介绍了在返回之前取消一个jQuery AJAX调用?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个jQuery对话框打开然后AJAX调用。我想使它如此,如果对话框关闭或取消按钮被按下,AJAX调用被取消并且其回调函数未被调用。我可以想到一些使用如下变量的方法
function doStuff(){
    var doCallback = true;
    $('#dialog').dialog({
      title: 'Dialog Title',modal: true,buttons: {
        Cancel: function() {
          doCallback = false;
          doSomethingElse();
        }
      }
    });
    $.get('url/url/url',function(data){
      if(doCallback){
        doTheSuccessThing(data);
      }
    });
  }
@H_404_4@但是,不知何故对我感到肮脏,它并没有实际停止AJAX调用完成。是否有内置的方式取消AJAX调用进行中?

解决方法

当我有一个可能被触发多次的回调,但是我只想使用最后一个,我使用这种模式:
var resultsXHR,resultsTimer,resultsId=0;
$('input').keyup(function(){
  clearTimeout(resultsTimer);                     // Remove any queued request
  if (resultsXHR) resultsXHR.abort();             // Cancel request in progress
  resultsTimer = setTimeout(function(){           // Record the queued request
    var id = ++resultsId;                         // Record the calling order
    resultsXHR = $.get('/results',function(data){ // Capture request in progress
      resultsXHR = null;                          // This request is done
      if (id!=resultsId) return;                  // A later request is pending
      // ... actually do stuff here ...
    });  
  },500);                                         // Wait 500ms after keyup
});
@H_404_4@只有abort()不足以阻止成功回调被调用;即使您尝试取消请求,您仍然可能会发现您的回调运行。这就是为什么有必要使用resultsId跟踪器并让回调停止处理,如果另一个,稍后重叠的回调已经准备好了。

@H_404_4@鉴于这是多么普遍和麻烦,我认为以一种可重用的方式来组织它是一个好主意,它不需要你为每个你想要处理的一个独特的三元组的局部变量名:

(function($){
  $.fn.bindDelayedGet = function(event,delay,url,dataCallback,dataType,callback){
    var xhr,timer,ct=0;
    return this.bind(event,function(){
      clearTimeout(timer);
      if (xhr) xhr.abort();
      timer = setTimeout(function(){
        var id = ++ct;
        xhr = $.get(url,dataCallback && dataCallback(),function(data){
          xhr = null;
          if (id==ct) callback(data);
        },dataType);
      },delay);
    });
  };
})(jQuery);

// In action
var inp = $('#myinput').bindDelayedGet('keyup',400,'/search',function(){ return {term:inp.val()}; },'html',function(html){ $('#searchResults').clear().append(html); }
);
@H_404_4@你可以在上面的代码中找到更详细的on my website

原文链接:https://www.f2er.com/jquery/183470.html

猜你在找的jQuery相关文章