jquery - jQuery时间间隔点击限制

Question

我需要解决一个困扰我们平台的问题。产品网站上有这个报告页面，用户可以去生成报告。报告可能太大而无法生成，需要几分钟时间。有些用户不耐烦，多次点击生成按钮。我想知道是否可以在按钮上设置时间，即当有人单击生成报告按钮时，页面不会让他们再次按下 5 分钟。更有趣的场景是，在 cookie 中存储一些东西，或者即使他们刷新页面，也可以阻止他们点击。

如果你能给我一些关于这个问题的好主意或例子，我将不胜感激，因为我不是 jQuery 的专家。

Answer 1

当然，您可以使用本地存储设置时间戳，并使用 jQuery 轻松设置 disabled 属性。

要禁用点击：

$('#myButton').on('click', function() {
    var $this = $(this);
    $this.prop('disabled', true);
    localStorage.myButtonEnableAt = new Date().getTime() + 30000;

    setTimeout(function(){
        $this.prop('disabled', false);
        localStorage.myButtonEnableAt = null;
    }, 30000);
});

在页面加载时，检查状态：

var now = new Date().getTime();
if (localStorage.myButtonEnableAt > now ) {
    $('#myButton').prop('disabled', true);
    setTimeout(function(){
        $('#myButton').prop('disabled', false);
        localStorage.myButtonEnableAt = null;
    }, localStorage.myButtonEnableAt - now);
}

演示： http: //jsfiddle.net/36JrM/ - 更改为 10 秒禁用以获得更快的演示。单击按钮。5 秒后，刷新页面，再过 5 秒就会按预期启用。

Answer 2

对于简单的情况，您可以禁用该按钮：

$('input').click(function() {
    $(this).prop('disabled', true);
});

尽管更好的解决方案是显示进度指示器（或至少是一个旋转的轮子）来告诉用户正在做某事。你也可以有一个虚假的进度条，它会慢慢增加七分钟。

真正的问题是用户没有得到任何反馈，所以他们按下按钮从你那里得到某种反馈。禁用按钮并且不让他们重新提交它可能会让他们感到沮丧，但我敢打赌，为您的用户提供任何形式的进步都会让他们感到高兴。

Answer 3

对于表单，我通常会这样做，因此它可以处理任何类型的提交，而不仅仅是按钮单击。

$('form').bind('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true){
        e.preventDefault();
    } 
    else {
        $form.data('submitted', true);
    }

    setTimeout(function(){
        $form.data('submitted', false);
    }, 30000);
});

仅对于按钮，您可以使用.prop('disabled', true)其他答案中提到的。