javascript - Jquery 计数器在重置后显示为零

Question

我正在使用 JQuery 设置一个从 60 开始的计数器，它运行良好。除了第一轮倒计时并达到零时，当我重置它时，它首先显示零，然后再次从 60 开始。我希望它在重置后立即从 60 开始。有什么想法吗？ 这是我的代码(这是一个示例代码，结果与我的原始代码相同)

    $("#Resend-confirm-phone-number-code").hide();
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(--count);
            if (count == 0) {
                clearInterval(timer);
                $("#resend").fadeOut("fast", function () { });
                $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
            }
        },
            1000);
    $("#resend").show();
    function aliAsghar() {
        $("#Resend-confirm-phone-number-code").hide();
        var count = 60,
            timer = setInterval(function () {
                $("#counter").html(--count);
                if (count == 0) {
                    clearInterval(timer);
                    $("#resend").fadeOut("fast", function () { });
                    $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
                }
            },
                1000);
        $("#resend").show();
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="newRegister-helpText">
            <p>
                enter the code
            </p>
        </div>
        <form class="newRegister-formBox" method="Post" id="confirmPhoneNumberForm" autocomplete="off">
            <div class="formElement newRegister-input">
                <i class="fa fa-key"></i>
                <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput"
                    placeholder="enter the code">
                <div class="newRegister-alarmText">
                    
                    <p id="resend"> seconds left<span id="counter" >60</span></p>  
                    
                    <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code" style="Display:none; " onclick="aliAsghar()">
                        <i class="fa fa-refresh"></i>
                        send again
                    </button>
    
                </div>
            </div>
            <div class="newRegister-button">
                <button type="button" id="send-confirm-phone-number-code" class="animateBtn" >
                    <i class="fa fa-check"></i>
                    submit
                </button>
            </div>
        </form>
    </div>

Answer 1

您可以通过在首次调用该函数时，并且在间隔的第一次迭代发生之前立即使用 count 值更新元素的 HTML 来解决此问题。

然后您可以通过在页面加载时简单地调用 aliAsghar() 来 DRY 逻辑，而不是将相同的逻辑复制到页面中两次。

请注意在 HTML 中对 on* 事件属性使用不显眼的事件处理程序，应尽可能避免这种情况，并删除 fadeX() 上的空回调函数 调用，这不是强制性的。

function aliAsghar() {
  $("#Resend-confirm-phone-number-code").hide();
  var count = 5; // set to 5 just to speed up testing
  $("#counter").html(count);

  var timer = setInterval(function() {
    $("#counter").html(--count);
    if (count == 0) {
      clearInterval(timer);
      $("#resend").fadeOut("fast");
      $("#Resend-confirm-phone-number-code").fadeIn("fast");
    }
  }, 1000);
  $("#resend").show();
}

aliAsghar(); // onload
$('#Resend-confirm-phone-number-code').click(function() {
  aliAsghar();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="newRegister-helpText">
    <p>
      enter the code
    </p>
  </div>
  <form class="newRegister-formBox" method="Post" id="confirmPhoneNumberForm" autocomplete="off">
    <div class="formElement newRegister-input">
      <i class="fa fa-key"></i>
      <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput" placeholder="enter the code">
      <div class="newRegister-alarmText">
        <p id="resend"> seconds left<span id="counter">60</span></p>
        <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code" style="Display:none;">
          <i class="fa fa-refresh"></i>
          send again
        </button>
      </div>
    </div>
    <div class="newRegister-button">
      <button type="button" id="send-confirm-phone-number-code" class="animateBtn">
        <i class="fa fa-check"></i>
        submit
      </button>
    </div>
  </form>
</div>