确保 ajax 请求不会被多次触发答案

【问题标题】：make sure ajax request doesn't get fired multiple time确保 ajax 请求不会被多次触发
【发布时间】：2013-05-21 04:36:04
【问题描述】：

我正在处理一个简单的表单页面，我想知道如果有人多次单击提交按钮会发生什么（以防我的共享主机当时似乎很慢）。

另外，如果有人想查看我的代码

$.ajax({
    url: "submit.php",
    type: 'POST',
    data: form,
    success: function (msg) {
        $(".ressult").html("Thank You!");
    },
    error: function () {
        $(".result").html("Error");
    }
});

有没有办法让它在用户点击一次后，直到第一次点击完成后才会再次运行？

谢谢

【问题讨论】：

第一次点击后禁用提交按钮。
可能重复stackoverflow.com/questions/16651772/…

标签： javascript jquery ajax

【解决方案1】：

你可以使用jQuery的.one()函数：

(function handleSubmit() {
    $('#submitBtn').one('click', function() {
        var $result = $('.result');
        $.ajax({
            url: 'submit.php',
            type: 'POST',
            data: form,
            success: function (msg) {
                $result.html('Thank You!');
                handleSubmit(); // re-bind once.
            },
            error: function () {
                $result.html('Error');
            }
        }); // End ajax()
    }); // End one(click)
}()); // End self-invoked handleSubmit()

*编辑：* 为多次提交添加了递归。

【讨论】：

问题在于用户希望函数再次运行。
我在原始答案中讨论了如何处理多个提交，但无论如何我都更新了一个示例。干杯~

【解决方案2】：

使用布尔标志

 if (window.isRunning) return;
 window.isRunning = true;
 $.ajax({
            url:"submit.php",
            type: 'POST',
            data: form,
            success: function (msg){                
                $(".ressult").html("Thank You!");
            },
            error: function (){
                $(".result").html("Error");
            },
            complete : function () {
                window.isRunning = false;
            }
        });

【讨论】：

什么是 window.isRunning ？
它是一个全局变量，更多信息请看这里：stackoverflow.com/questions/11148997/window-variablename

【解决方案3】：

var $button = $(this);
$button.prop('disabled', true); // disable the button
$.ajax({
    url:"submit.php",
    type: 'POST',
    data: form,
    success: function (msg){                
        $(".ressult").html("Thank You!");
    },
    error: function (){
        $(".result").html("Error");
    },
    complete: function() {
        $button.prop('disabled', false); // enable it again
    }
});

【讨论】：

【解决方案4】：

您是否考虑过在查询执行时将提交按钮替换为加载器图像，然后在查询完成后重新添加？

编辑：使用加载器图像是一种通用的“我正在做某事”指示器，但禁用按钮也可以！

【讨论】：

【解决方案5】：

您可以在进行 ajax 调用之前禁用提交按钮。然后，如果需要，在成功时启用它。

【讨论】：