jquery – 在点击后禁用提交按钮,几秒钟后再次启用

在提交表单时,我使用 jquery $.post.我希望在点击此按钮5秒钟后禁用该按钮,以避免多次提交表单.

这是我现在所做的：

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

我以前使用过fadeIn和fadeOut,但是当我测试它快速点击按钮时,它仍然不起作用.我应该怎么做才能实现我想要发生的事情？

解决方法

你可以这样做你想要的：

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

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

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

});

编辑：this is an example服务器端响应延迟3秒