链接被Cliked时禁用多个Ajax请求
我正在尝试实施一种避免点击垃圾邮件的方法。 我有一个链接按钮，单击该按钮时使用Jquery $ .ajax（）命令将请求发送到服务器。 我想要一种方法来禁止多次点击，例如在添加注释时在StackOverflow中实现的点击。
有什么建议吗？
您可以在完成ajax请求时阻止UI。 看看这个的blockUI插件
你可以这样做……
$("#buttonId").click(function(){ $(this).attr("disabled", true); $.ajax({}); // Your ajax call. }); jQuery具有为此目的而设计的.one（）方法 。 一个（未经测试的）示例：
function doAjax(){ // Your Ajax call. $.ajax({..., success: function() { // Ajax call done, re-enabling the button/link $("#buttonId").one('click', doAjax); }, ...}); } $("#buttonId").one('click', doAjax);
它实际上取决于元素的类型，但对于超链接，您可能需要取消绑定click事件并在ajax请求完成时重新绑定它：
function ajaxThingie() { $(this).unbind("click"); // do something ajaxy, and in the success callback rebind: $.get("foo.html", function() { $(this).bind("click", ajaxThingie); }); return false; } $(document).ready(function() { $("#theLink").click(ajaxThingie); });
另一个适用于我（在链接上）的选项是在点击（禁用）时设置一个attr，然后在完成ajax调用后删除。
唯一的额外步骤是因为仍然会在链接上调用click事件，就是在触发ajax调用之前检查该attr是否存在。
if ($form.attr("disabled")!=="disabled") { $.ajax({ success: function(data){ $form.removeAttr("disabled"); }, dataType: "json" }); } $form.attr("disabled", "disabled");
我在点击某个项目时尝试了其他选项
beforeSend:function(){ $(placeholder).addClass('loading'); },
占位符通常是DOM上最高级别的元素，我们通常可以负担#cotent或$ page或类似的东西
.loading的css如下
.loading { background: #fff url('../images/ajax-loader.gif') center 10px; opacity: 1; } loading * { opacity: .8; }
我希望使用同样的东西，我们可以点击那个顶级元素，例如
beforeSend:function(){ $(placeholder).addClass('loading'); $(placeholder).click(function(){preventDefault();}); }, complete:function(){ $(placeholder).removeClass('loading'); $(placeholder).click(function(){// now do the default action}); },
希望这能解决问题
使用flag变量并设置为defult“0”，点击后，将其值设置为“1”
我写了一堂课，在snapwebsites做这样的事情。 我的问题是我希望可以向服务器报告许多更改，但避免同时运行两个AJAX请求。
因此，主要问题是要知道是否仍有请求，如果是，则阻止进一步请求。 但是，其他请求可能会携带仍需要发送到服务器的其他数据，只有我们要等到当前请求返回后再发送该附加数据。
不仅如此，我希望请求之间有一定的秒数。 到目前为止，最后一个要求，我还包括一个带有计时器的版本。 但是，这可能会导致数据丢失，因为最新数据位于客户端的计算机上，可能无法发送。 我想我会实现为最后一个案例使用cookie的必要性。
代码是1200行，所以我只给你一个SourceForge.net上GIT的链接。 这个概念很简单。 正如其他人所提到的，你想要一个标志来知道请求是否仍然存在。 调用complete()回调函数时，标志会重置。
“类”（JavaScript类使用原型，但我喜欢用ActionScript类记录它们）如下所示：
class ServerAccess { public: function ServerAccess(callback: ServerAccessCallbacks); function setURI(uri: string, opt_queryString: Object) : Void; function setData(data: Object) : Void; function send() : Void; static function appendQueryString(uri: string, query_string: Object): string; private: var callback_: ServerAccessCallbacks = null; var uri_: string = ""; var queryString_: Object = null; var data_: Object = null; }; class ServerAccessTimer extends ServerAccessCallbacks { public: function ServerAccessTimer(request_name: String, timer_callback: ServerAccessTimerCallbacks, interval: Number); function send(); virtual function serverAccessSuccess(result : ResultData) : Void; virtual function serverAccessError(result : ResultData) : Void; virtual function serverAccessComplete(result : ResultData) : Void; private: var requestName_: String; var timerCallback_: ServerAccessTimerCallbacks; var interval_: Number; var processing_: Boolean; var timer_: Number; var lastRequest_: Number; };
我在电子商务JavaScript中有一个使用示例。 预计数据将由回调生成（请参阅ServerAccessTimerCallbacks引用）。 所以你可以每秒调用send（）1000，但每个requestInterval_最多只能获得一个请求（即每隔10秒可以调用一次）。
snapwebsites.eCommerceCart.prototype.sendCart_ = function() { if(this.initializing_) { return; } if(!this.serverAccessTimer_) { this.serverAccessTimer_ = new snapwebsites.ServerAccessTimer("cart", this, this.requestsInterval_); } this.serverAccessTimer_.send(); };