停止重复的 Ajax 提交？

Question

我想知道使用 jquery 和 ajax 时停止重复提交的最佳方法是什么？

我想出了 2 种可能的方法，但不确定这是否是唯一的 2 种。

1. 在 Ajax 开始时禁用所有按钮，直到请求完成。我看到的两个问题是我使用 jquery 模型对话框，所以我不知道禁用这些按钮有多容易，因为我不确定它们是否有 id。其次，如果请求挂起，用户实际上无法重试，因为所有按钮都被禁用。

2. 我现在正在研究一个叫做 AjaxQueue 的东西，我不知道它是否是我需要的或者它是如何工作的，因为该插件的网站显然已关闭以进行维护。

http://docs.jquery.com/AjaxQueue

编辑

我认为这是我所看到的内容的衍生。

http://www.protofunc.com/scripts/jquery/ajaxManager/

我看到这个 ajaxManager 的唯一问题是我认为我必须将所有 $.post、$.get 和 $.ajax 更改为其类型。

但是如果我需要 $.ajax 中的特殊参数会发生什么？或者说我喜欢使用 .post 和 .get。

编辑2

我认为它可以接受所有 $.ajax 选项。我还在调查中。然而，我现在不确定的是，我是否可以对使用相同选项的所有请求使用相同的构造函数。

First you have to construct/configure a new Ajaxmanager
//create an ajaxmanager named someAjaxProfileName
var someManagedAjax = $.manageAjax.create('someAjaxProfileName', {
    queue: true, 
    cacheResponse: true
});

或者我每次都必须做以上吗？

Answer 1

当用户单击按钮时设置一个标志怎么样？仅当 AJAX 请求成功完成时（在

complete

中，在

success

和

error

回调之后调用），您才会清除该标志，并且如果未设置该标志，您将仅发送 AJAX 请求。

与 AJAX 队列相关，有一个名为 jQuery Message Queuing 的插件非常好。我自己用过。

var requestSent = false;

jQuery("#buttonID").click(function() {   
   if(!requestSent) {
      requestSent = true;

      jQuery.ajax({
         url: "http://example.com",
         ....,
         timeout: timeoutValue,
         complete: function() {
             ...
             requestSent = false;
         },
      });
   }
});

如果您认为您的请求有可能挂起，您可以为长时间运行的请求设置超时值（值以毫秒为单位）。如果发生超时，则调用

error

回调，之后调用

complete

回调。

Answer 2

您可以将活动请求存储在变量中，然后在有响应时清除它。

var request;  // Stores the XMLHTTPRequest object

$('#myButton').click(function() {
    if(!request) {  // Only send the AJAX request if there's no current request 

        request = $.ajax({  // Assign the XMLHTTPRequest object to the variable
            url:...,
            ...,
            complete: function() { request = null } // Clear variable after response
        });

    }
});

编辑：

这样做的一个好处是，您可以使用

abort()

取消长时间运行的请求。

var request;  // Stores the XMLHTTPRequest object
var timeout;  // Stores timeout reference for long running requests

$('#myButton').click(function() {
    if(!request) {  // Only send the AJAX request if there's no current request 

        request = $.ajax({  // Assign the XMLHTTPRequest object to the variable
            url:...,
            ...,
            complete: function() { timeout = request = null } // Clear variables after response
        });

        timeout = setTimeout( function() {
                        if(request) request.abort();  // abort request
                  }, 10000 );                         //   after 10 seconds

    }
});

Answer 3

$.xhrPool = {};
$.xhrPool['hash'] = []
$.ajaxSetup({
    beforeSend: function(jqXHR,settings) {
        var hash = settings.url+settings.data
        if ( $.xhrPool['hash'].indexOf(hash) === -1 ){
            jqXHR.url   = settings.url;
            jqXHR.data  = settings.data;
            $.xhrPool['hash'].push(hash);
        }else{
            console.log('Duplicate request cancelled!');
            jqXHR.abort();
        }
    },
    complete: function(jqXHR,settings) {
        var hash = jqXHR.url+jqXHR.data 
            if (index > -1) {
                $.xhrPool['hash'].splice(index, 1);
            }
        }
    }); 

Answer 4

这里有一个“退货方法”

在处理完成之前不会再次执行ajax代码

var firstenter = true;


jQuery("#buttonID").click(function() { 
  if(!firstenter){
     return;
  }
  firstenter = false;
  jQuery.ajax({
     url: "http://example.com",
     ....,
     timeout: timeoutValue,
     complete: function() {
         ...
         firstenter = true;
     },
  });

});