禁用提交按钮4小时

Question

我已经构建了一个ASP.Net MVC 5应用程序。在其中一个Razor Views中，我有一个Submit按钮，用户可以点击该按钮发送电子邮件和短信。但是，当用户单击“提交”按钮时，可能需要10或15秒才能发送消息。由于这个时间延迟，用户有时会多次单击“提交”按钮，认为第一次单击“提交”按钮不起作用。即使向用户显示警告信息，也不要多次单击“提交”按钮，他们仍然会这样做。

我现在想要禁用提交按钮4小时。我可以使用一些JQuery禁用提交按钮

$('#myButton').prop('disabled', true);

但是，这没有多大帮助，因为如果用户重新访问页面或刷新，则可以再次单击该按钮。相反，我想要的是提交按钮从最初点击后4小时被禁用。

我真的不确定最好的方法是什么。我知道我可以存储按钮在我的数据库中单击的日期时间并对其进行验证，但我不确定这是最好的方法。也许可以使用会话变量？

有没有人曾经遇到过这样的场景？任何建议将不胜感激。

谢谢。

Answer 1

以下代码正在执行您想要的操作。

单击该按钮时，该按钮被禁用，并使用当前时间戳设置cookie。

如果您的用户停留在页面上，则按钮将在超时变量中设置的时间后启用。

如果用户没有停留，则将从cookie中读取时间戳并启动新的计时器，这将在四小时后立即启用该按钮。

这是相关的jQuery代码：

var timeout = 4 * 60 * 60 * 1000; // 4 Hours * 60 Minutes * 60 Seconds * to Milliseconds
if (Cookies.get('disabledBtn') !== undefined) {
  $('#myButton').prop('disabled', true);
  var cookieSet = Cookies.get('disabledBtn');
  var delay = timeout - ($.now() - cookieSet);
  setInterval(function() {
    $('#myButton').prop('disabled', false);
    Cookies.remove('disabledBtn');
  }, delay);
}

$('#myButton').on('click', function() {
  $(this).prop('disabled', true);
  Cookies.set('disabledBtn', $.now());

  setInterval(function() {
    $('#myButton').prop('disabled', false);
    Cookies.remove('disabledBtn');
  }, timeout);
});

Here is a jsFiddle where you can test the code.

在jsFiddle中也是一个删除Cookie的按钮，显然你不需要按钮和点击监听器。

Answer 2

这是一个禁用按钮3秒的示例。

$('#enter').on('click',function(){
    document.getElementById("enter").disabled=true;
    setInterval(function(){document.getElementById("enter").disabled=false;},3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='enter'>Try it</button>