jQuery时间间隔点击限制

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

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

来源

2013-02-28 ComeRun

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

要禁用点击：

$('#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秒钟后按预期启用。

来源

2013-02-28 23:42:34 AlienWebguy

感谢您的好回答的人。 – ComeRun 2013-03-01 00:55:38

高兴地帮助:) – AlienWebguy 2013-03-01 00:56:53

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

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

虽然一个更好的解决办法是将显示进度指示器（或至少是纺车）来告诉用户该东西是正在完成。你也可以有一个虚假的进度条，缓慢增加7分钟。

真正的问题是用户没有得到任何反馈，所以他们按下按钮来获得您的某种反馈。禁用按钮并且不让他们重新提交它可能会让他们感到沮丧，但我敢打赌，给用户的任何进步都会让他们开心。

来源

2013-02-28 23:44:59 Blender

对于表单我通常做这样的事情，所以它处理任何类型的提交，而不仅仅是点击按钮。

$('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)在其他的答案中提到。

来源

2013-02-28 23:48:40 ZolaKt

jQuery时间间隔点击限制

回答

相关问题