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);
});

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

真正的问题是用户没有得到任何反馈，因此他们按下按钮以获得您的某种反馈。禁用按钮而不让它们重新提交可能会让他们感到沮丧，但我敢打赌，向用户提供任何类型的进展都会让他们感到高兴。

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)。

jQuery时间间隔点击限制

3 个答案: