单击后禁用提交按钮，几秒钟后再次启用

Question

提交表单时，我正在使用jquery $ .post。我想在单击按钮后禁用按钮约5秒钟，以避免多次提交表单。

这是我现在所做的：

$('#btn').click(function(){
    $.post(base_url + 'folder/controller/function',$('#formID').serialize(),function(data){
        $('#message').slideDown().html('<span>'+data+'</span>');
    });
});

我之前使用了fadeIn和fadeOut，但是当我快速测试单击按钮时仍然无法正常工作。我应该怎么做才能实现自己想实现的目标？

Answer 1

您可以这样操作：

var fewSeconds = 5;
$('#btn').click(function(){
    // Ajax request
    var btn = $(this);
    btn.prop('disabled', true);
    setTimeout(function(){
        btn.prop('disabled', false);
    }, fewSeconds*1000);
});

或者您可以使用.complete()ajax收到响应后正在执行的jQuery 方法：

$('#btn').click(function(){
    var btn = $(this);
    $.post(/*...*/).complete(function(){
        btn.prop('disabled', false);
    });
    btn.prop('disabled', true);

});

编辑： 这是一个
3秒钟服务器端响应延迟的示例