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秒后启用.