如何阻止用户反复单击jQuery AJAX调用？

我有一个带有以下脚本的网页

使用Javascript

function LinkClicked() { var stage = this.id; var stop = $('#ContentPlaceHolderMenu_txtDate').val(); var nDays = $('#ContentPlaceHolderMenu_txtNumberOfDays').val(); $("[id$='spinner']").show(); $.ajax({ type: 'POST', contentType: 'application/json', url: "...", data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}", success: function (data) { $("[id$='spinner']").hide(); PlotData(data.d); }, error: function () { $("[id$='spinner']").hide(); alert("An error occured posting to the server"); } }); } 

在查询运行时如何阻止用户反复单击？ 呼叫来自网格中的单元，无法轻松禁用。 理想情况下，我想在脚本中执行此操作而不禁用DOM上的链接。

在这里，我点击了五次，你可以看到发送了五个AJAX请求。 该页面应该禁用在它已经运行时重复调用的同一个调用。

提前致谢。

Answer 1

你可以有一个跟踪状态的外部变量

 var linkEnabled = true; function LinkClicked() { if(!linkEnabled){ return; } linkEnabled = false; var stage = this.id; var stop = $('#ContentPlaceHolderMenu_txtDate').val(); var nDays = $('#ContentPlaceHolderMenu_txtNumberOfDays').val(); $("[id$='spinner']").show(); $.ajax({ type: 'POST', contentType: 'application/json', url: "...", data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}", success: function (data) { $("[id$='spinner']").hide(); PlotData(data.d); linkEnabled =true; }, error: function () { $("[id$='spinner']").hide(); alert("An error occured posting to the server"); linkEnabled = true; } }); } 

这样做的另一个好处是，如果需要，您可以选择启用此function的其他效果，并且只能阻止重复ajax调用。

（注意，理想情况下，您希望将外部变量粘贴在闭包或命名空间中，而不是将其变为全局变量）。

Answer 2

用户单击时禁用按钮，并在从ajax获得响应时将disabled设置为false。

Answer 3

在函数外部声明一个变量，初始值为false：

 var pending = false; 

当你提出请求时，你会做：

 if (pending == true) {return;} pending = true; 

这使得它在您已经运行时停止，并且在请求完成时：

 pending = false; 

现在即使没有按钮，请求也不会多次触发。

另外，您的数据不需要是字符串。 你可以这样做：

 data: {stage: stage, stop: stop, nDays: nDays} 

Answer 4

你可以检查使用它

 var ajax_stat = false function doing_ajax(){ if(ajax_stat) return; ajax_stat = true; var xmlRequest = $.ajax({ type: 'POST', contentType: 'application/json', url: "...", data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}", success: function (data) { $("[id$='spinner']").hide(); PlotData(data.d); }, error: function () { $("[id$='spinner']").hide(); alert("An error occured posting to the server"); ajax_stat = false; } }); } 

Answer 5

使用下面的代码。 它不会进行多个ajax调用。

 function LinkClicked() { if($(window).data("ajaxRUnning")){ return; } $(window).data("ajaxRUnning",true); var stage = this.id; var stop = $('#ContentPlaceHolderMenu_txtDate').val(); var nDays = $('#ContentPlaceHolderMenu_txtNumberOfDays').val(); $("[id$='spinner']").show(); $.ajax({ type: 'POST', contentType: 'application/json', url: "...", data: "{stage:'" + stage + "',stop:'" + stop + "',nDays:'" + nDays + "'}", success: function (data) { $("[id$='spinner']").hide(); PlotData(data.d); $(window).data("ajaxRUnning",false); }, error: function () { $("[id$='spinner']").hide(); alert("An error occured posting to the server"); $(window).data("ajaxRUnning",false); } }); }