javascript - 我想在用户单击一次后禁用忘记密码按钮 30 秒,以避免多次触发电子邮件忘记密码
问题描述
嗨,我必须在用户单击一次后立即禁用忘记密码按钮 30 秒,并且警报应向他显示“请在 30 秒后重试”这是为了避免多次触发为用户提供临时密码的邮件。30 秒后按钮应再次启用
我尝试在单击后使用 setTimeout 禁用按钮 30 秒。我对如何使用它感到困惑。请帮助我
<button>
<a id="forgotPassword" class="cursorPointer loginlables">
Forgot Password?
</a>
</button>
用户应该能够单击一次忘记密码按钮,然后如果他在第一次单击后 30 秒内尝试再次单击按钮,则应显示错误消息。
解决方案
您可以设置一个全局变量来保存用户单击按钮的时间以及已启动的操作(如发送提醒)。每次输入按钮的单击处理程序的回调时,都会将此时间与当前时间进行比较,如果差异小于 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>
推荐阅读
- python - python如何在不使用随机库的情况下根据给定的输入生成随机数?
- azure - 将 Azure VM 从美国迁移到欧洲
- python - 检测连续图像的非/最小变化像素的最快方法
- jquery - jQuery Autocomplete 无法从 ajax 结果追加下拉列表
- android - 如何在使用 Unity 作为 Android 应用程序中的库时解决“libmain.so not found”问题,其中最新的 AndroidX 版本来自 ReactNative
- hadoop - 如何删除多个 HDFS 目录中最近创建的文件?
- google-cloud-endpoints - 从 Google Cloud Endpoints 后面的 appengine 返回自定义错误
- android - 当用户打开下一个片段时,如何停止 CountDownTimer 计数?
- python - 使用 vtkCamera 显式投影变换矩阵和 prop3D 可见性
- r - 有什么方法可以使用 sourceCpp() 制作中缀函数