点击后倒计时不重置

Question

按下按钮会生成倒计时以请求新密码。在这个变为 0 之后，你会得到一个新的 link 来请求它。问题是在现有倒计时期间我按下按钮。似乎不知何故我在同一时间运行 2 个柜台，但不确定如何解决此问题。你能帮忙吗：

<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+\"&amp;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();
});

Answer 1

您只需要检查倒计时是否已经运行并且如果是则不开始倒计时 - 现在它只是开始一个新的间隔，与旧的运行 side-by-side每次点击一个。

Answer 2

gCountdownTimerHandle 应该在 opt() 函数之外。每次单击按钮时，您都在 opt() 函数内的第 3 行 将 gCountdownTimerHandle 重置为 0。这就是为什么您的 clearInterval 没有捕获 setInterval 的实际 ID，因此它没有被清除。

希望对您有所帮助！

点击后倒计时不重置

Countdown not reseting after click

javascript

setinterval

reset

countdown