重置后，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()来干掉逻辑，而不是将相同的逻辑复制到页面中两次。

请注意，在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>

Answer 2

简单地说：$('#counter').text( "60" );

$("#Resend-confirm-phone-number-code").hide();
$('#counter').text( "60" );
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();
    $('#counter').text( "60" );
    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" ></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>

要简化代码，您只需调用该函数：

/*$("#Resend-confirm-phone-number-code").hide();
$('#counter').text( "60" );
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();*/
aliAsghar();
function aliAsghar() {
    $("#Resend-confirm-phone-number-code").hide();
    $('#counter').text( "60" );
    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" ></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>