停止重复的Ajax子代码？

Question

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

我想出了两种可能的方法,但不确定这些是否只有2种.

1. 在Ajax启动时禁用所有按钮,直到请求完成.我看到的2个问题虽然是我使用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

    }
});