點擊后倒計時不重置

Question

按下按鈕它會產生倒計時以請求新密碼。 在此值變為 0 后，您將獲得一個新鏈接來請求它。 問題是在現有倒計時期間我按下按鈕時。 似乎不知何故我在同一時間運行 2 個計數器，但不知道如何解決這個問題。 你能幫忙嗎：

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+\"&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

gCountdownTimerHandle應該在 opt() 函數之外。 每次單擊按鈕時 - 您在 opt() 函數內的第 3行將 gCountdownTimerHandle 重置為 0 。 這就是為什么您的 clearInterval 沒有捕獲 setInterval 的實際 id，因此它沒有被清除。

希望能幫助到你！

Answer 2

您只需要檢查倒計時是否已經在運行，如果是則不開始倒計時 - 現在它只是開始一個新的間隔，每次單擊時都會與舊的間隔並排運行它。