JQuery计数器重置后先显示0再计数的问题求助

Hey there! Let's break down why that annoying 0 flash happens when you reset your countdown, and fix it for good.

The Root Cause #

Your current code has two main issues leading to that flash:

• When you reset the countdown, you don't immediately update the counter display. The first timer tick runs 1 second later, so the counter stays at 0 in that gap.
• You've duplicated the countdown logic, which makes it harder to maintain and risks multiple timers running if someone resets mid-countdown.

Step-by-Step Solution #

Let's rewrite the code to fix these problems, with cleaner, more maintainable logic:

1. Encapsulate the Countdown Logic

First, we'll wrap all countdown behavior into a single function so we don't repeat code, and add a way to clear existing timers before starting a new one.

2. Update the Counter Immediately on Reset

We'll manually set the counter to 60 right when we start the countdown, instead of waiting for the first timer tick.

3. Use jQuery Event Binding Instead of Inline onclick

This makes the code cleaner and easier to debug.

Modified Full Code #

JavaScript

// Store the timer instance globally so we can clear it later
let countdownTimer = null;

// Reusable countdown function
function startCountdown() {
    // Clear any existing timer to prevent multiple countdowns running at once
    if (countdownTimer) {
        clearInterval(countdownTimer);
    }

    // Toggle button visibility
    $("#Resend-confirm-phone-number-code").hide();
    $("#resend").show();

    let count = 60;
    // Immediately set the counter to 60 to avoid the 0 flash
    $("#counter").text(count);

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

// Initialize countdown when the page loads
$(document).ready(function() {
    startCountdown();
});

// Bind reset action to the "send again" button
$("#Resend-confirm-phone-number-code").click(function() {
    startCountdown();
});

HTML

<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>

Key Improvements #

• No More 0 Flash: By setting $("#counter").text(count) right when we start the countdown, the counter jumps straight to 60 when reset.
• Single Timer Management: The global countdownTimer variable ensures we always clear any existing timer before starting a new one, preventing overlapping countdowns.
• Cleaner Code: Encapsulating the logic into startCountdown() eliminates duplication and makes future changes easier.

内容的提问来源于stack exchange，提问作者Moji