[英]Countdown not reseting after click
Pressing the button it generates a countdown to request a new password.按下按钮它会产生倒计时以请求新密码。 After this gets to 0 you get a new link to request it.
在此值变为 0 后,您将获得一个新链接来请求它。 The issue is when during existing countdown I am pressing the button.
问题是在现有倒计时期间我按下按钮时。 It seems somehow I am running in the same time 2 counters and not sure how to fix this.
似乎不知何故我在同一时间运行 2 个计数器,但不知道如何解决这个问题。 Can you please help:
你能帮忙吗:
https://codepen.io/acode2/pen/poaWpmv https://codepen.io/acode2/pen/poaWpmv
<form class="olr-form">
<input
data-sc-field-name="secondsToNextOTP"
value="30"
>
<p class="passcodeReRequest">Don't have a valid passcode?</p>
<button type="submit" class="button__next button__test">Test</button>
</form>
const opt = () => {
$('.test').remove();
$('.otpLinkAvailable').remove();
let gCountdownTimerHandle = 0;
let gDateTimeForNextOTP = null;
// getting the seconds to cowntdown
let secsToNextOTP = $("[data-sc-field-name=secondsToNextOTP]").val() * 1;
if (secsToNextOTP) {
let passCodeResendlink = $(".passcodeReRequest");
Date.prototype.addSecs = function (s) {
this.setTime(this.getTime() + (s * 1000));
return this;
}
// this function is polled and updates the status of time until a new OTP request can be made by the user
function showTimeToWaitForOTP() {
try {
const linkAvailableInTag = $(".otpLinkAvailable");
const secondsToNextOTP = Math.round((gDateTimeForNextOTP - new Date()) / 1000);
if (linkAvailableInTag && linkAvailableInTag.length > 0) {
if (secondsToNextOTP > 0) {
linkAvailableInTag.text(" you can re-request a passcode in " + secondsToNextOTP + " seconds");
} else {
clearInterval(gCountdownTimerHandle);
linkAvailableInTag.text("");
linkAvailableInTag.after(" <a class='test' href='javascript:document.location = document.location+\"&resendOTP=true\"'>Send a new passcode</a>");
}
}
else {
clearInterval(gCountdownTimerHandle);
}
} catch { // any errors, cancel the timeout
clearInterval(gCountdownTimerHandle);
}
}
// // check if we need to trigger the OTP countdown timer
if (passCodeResendlink && passCodeResendlink.length > 0 && secsToNextOTP >= 0) {
gDateTimeForNextOTP = new Date().addSecs(secsToNextOTP);
passCodeResendlink.append("<span class='otpLinkAvailable'></span>");
gCountdownTimerHandle = setInterval(showTimeToWaitForOTP, 500); // issue countdown
}
}
}
$(".button__test").click(function(e) {
e.preventDefault();
opt();
});
gCountdownTimerHandle should be outside the opt() function. gCountdownTimerHandle应该在 opt() 函数之外。 Each time you are clicking the button - you are resetting gCountdownTimerHandle to 0 at line number 3 inside opt() function.
每次单击按钮时 - 您在 opt() 函数内的第 3行将 gCountdownTimerHandle 重置为 0 。 That is why your clearInterval is not capturing the actual id of setInterval and hence it is not getting cleared.
这就是为什么您的 clearInterval 没有捕获 setInterval 的实际 id,因此它没有被清除。
Hope it helps!希望能帮助到你!
您只需要检查倒计时是否已经在运行,如果是则不开始倒计时 - 现在它只是开始一个新的间隔,每次单击时都会与旧的间隔并排运行它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.