首页 > 解决方案 > 我想在用户单击一次后禁用忘记密码按钮 30 秒,以避免多次触发电子邮件忘记密码

问题描述

嗨,我必须在用户单击一次后立即禁用忘记密码按钮 30 秒,并且警报应向他显示“请在 30 秒后重试”这是为了避免多次触发为用户提供临时密码的邮件。30 秒后按钮应再次启用

我尝试在单击后使用 setTimeout 禁用按钮 30 秒。我对如何使用它感到困惑。请帮助我

  <button>
    <a id="forgotPassword" class="cursorPointer loginlables">
      Forgot Password?
    </a>
  </button>

用户应该能够单击一次忘记密码按钮,然后如果他在第一次单击后 30 秒内尝试再次单击按钮,则应显示错误消息。

标签: javascript

解决方案


您可以设置一个全局变量来保存用户单击按钮的时间以及已启动的操作(如发送提醒)。每次输入按钮的单击处理程序的回调时,都会将此时间与当前时间进行比较,如果差异小于 30 秒,则显示警报对话框。

Javascript 为时间和日期操作提供了Date对象。

var lastCall = 0;
var timeToWait = 30;

function doAction() {
  var timePassed = Date.now() - lastCall;
  if (timePassed >= timeToWait * 1000) {
    console.log("send email");
    lastCall = Date.now();
  } else {
    alert("Please wait " + parseInt(timeToWait - (timePassed / 1000)) + " seconds");
  }
}
document.getElementById("forgotPassword").addEventListener("click", doAction);
<button id="forgotPassword">
Forgot password
</button>


推荐阅读