如何在 ajax 请求正在进行时禁止单击链接？答案

【问题标题】：How do I disallow clicking on a link while an ajax request is in progress?如何在 ajax 请求正在进行时禁止单击链接？
【发布时间】：2009-01-18 09:34:44
【问题描述】：

我有“a”元素，它作为按钮服务。它没有 href 属性。

我正在使用 jQuery 来实现非常简单的事情：点击时启动 ajax 请求并防止进一步点击。 ajax 完成后，启用点击。我不使用表单或输入按钮。

var contact= {
    send: function() {
        $.ajax({
            type: "POST",
            url: "ws/ContactService.asmx/SendEmail",
            data: '{"fromEmail":"' + $("#email").val() + '", "fromName":"' + $('#name').val() + '", "subject":"' + $('#subject').val() + '", "message":"' + $('#message').val() + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            error: function() {

                alert("Error");

            },
            success: function(msg) {
                alert(msg.d);
            },
            complete: function() {
            $("#send").text("Send");

            }
        });
    }
};
$(document).ready(function() {
    $("#send").("click", function() {
        $("#send").text("Sending...");       
        contact.send();
    });
}
);

这很好用，除了我可以根据需要多次点击发送，每次点击都会产生新的 ajax 请求。在ajax请求进行时如何防止点击“a”元素？

【问题讨论】：

标签： jquery ajax

【解决方案1】：

你可以这样使用：

var contact = {
  inprogress: false,
  send: function() {
     if (contact.inprogress)
       return;

     contact.inprogress = true;
     $.ajax({
       ...
       complete: function() {
         $("#send").text("Send");
         contact.inprogress = false;
       }
     });
  }
};

【讨论】：

【解决方案2】：

使用one of these techniques，在ajax调用返回时设置链接。

【讨论】：

【解决方案3】：

或者将 async 设置为 false，这将冻结页面直到请求完成

【讨论】：

这通常会带来非常糟糕的用户体验，尤其是在请求需要一段时间的情况下。