使用 setTimeout ( ) 禁用提交按钮，它有效吗？答案

【问题标题】：Disable submit button with setTimeout ( ) , Does it work?使用 setTimeout ( ) 禁用提交按钮，它有效吗？
【发布时间】：2020-08-17 15:58:01
【问题描述】：

我有一个问题，如果我禁用表单提交按钮 5 分钟，在使用 setTimeout() 提交后，即使用户重新加载页面，它是否仍然有效？或者他/她无需等待 5 分钟即可再次提交？我想避免垃圾邮件。

我不想添加验证码，因为我是新手，将它们添加到我现有的工作表单中似乎很复杂

【问题讨论】：

没有办法在客户端上真正阻止它。您可以将其存储到本地存储中并查看是否应该禁用它，但用户可以轻松擦除本地存储。
除此之外你还建议我做什么？
可以使用localstorage来防止，但是不安全。除非您在服务器端阻止它，否则没有什么是安全的。
当页面被加载（或重新加载）时，其中的所有代码都会重新解析并再次运行。如果您需要确保将剩余时间转移到重新加载的页面，则需要在页面调用之间存储它。这可以通过localStorage 完成并存储在本地。如果您需要更高的安全性，您可以将剩余时间存储在服务器上，但这需要服务器端代码，例如 PHP。无论哪种方式，您都需要添加一些在页面加载时运行的代码，这些代码会尝试检索剩余的等待时间并在该时间段内启动用户。
如果用户想要绕过它，您在客户端上所做的任何事情都可以被用户覆盖。

标签： javascript html forms disable

【解决方案1】：

您无法在客户端真正阻止它。您可以使用 localstorage 来保存它，这样当页面重新加载时，您可以禁用该按钮。

function disableButton (time) {
  var btn = document.getElementById('yourButton');
  btn.disabled = true;
  window.setTimeout(function () {
   btn.disabled = false; 
  }, time);
}

function buttonClicked () {
    var enableTime = new Date().getTime() + 300000;
    disableButton(enableTime);
    window.localStorage.setItem('time', 300000);
}

var time = window.localStorage.getItem('time');
if (time) {
  var diff = new Date(time) - new Date().getTime();
  if (diff > 0) {
    disableButton(diff);
  }
}

唯一真正安全的方法是服务器端，因为用户可以轻松删除本地存储或手动进入开发工具并启用按钮。

【讨论】：