原生JavaScript实现启停控倒计时器时addEventListener使用异常求助

Hey there! Let's get that wonky countdown timer working properly. It sounds like your button event listeners are running into scope or state-tracking issues—super common when dealing with timers in JS. Below is a fully functional implementation that meets all your requirements, plus a breakdown of the key bits that might have tripped you up.

Working Code #

HTML #

<div class="countdown-container">
  <input type="number" id="countdownInput" min="1" value="60" placeholder="Enter seconds">
  <div class="controls">
    <button id="startBtn">Start</button>
    <button id="cancelBtn">Cancel</button>
    <button id="pauseBtn">Pause</button>
  </div>
</div>

JavaScript #

// Grab DOM elements
const countdownInput = document.getElementById('countdownInput');
const startBtn = document.getElementById('startBtn');
const cancelBtn = document.getElementById('cancelBtn');
const pauseBtn = document.getElementById('pauseBtn');

// Track timer state (critical for avoiding button conflicts)
let timerInterval = null;
let isPaused = false;
let currentTime = parseInt(countdownInput.value);
const defaultTime = parseInt(countdownInput.value);

// Attach event listeners to your buttons
startBtn.addEventListener('click', startCountdown);
cancelBtn.addEventListener('click', cancelCountdown);
pauseBtn.addEventListener('click', togglePause);

function startCountdown() {
  // Don't spawn duplicate timers if already running and not paused
  if (timerInterval && !isPaused) return;

  // Reset pause state if resuming
  isPaused = false;

  // Validate and update current time from input
  const inputValue = parseInt(countdownInput.value);
  if (!isNaN(inputValue) && inputValue > 0) {
    currentTime = inputValue;
  }

  // Lock input while timer runs (user-friendly touch)
  countdownInput.disabled = true;

  // Start the countdown loop
  timerInterval = setInterval(() => {
    if (!isPaused) {
      currentTime--;
      countdownInput.value = currentTime;

      // Stop timer when we hit 0
      if (currentTime <= 0) {
        clearInterval(timerInterval);
        timerInterval = null;
        countdownInput.disabled = false;
        alert('Countdown finished!');
      }
    }
  }, 1000);
}

function cancelCountdown() {
  // Clear any active timer
  if (timerInterval) {
    clearInterval(timerInterval);
    timerInterval = null;
  }

  // Reset all state to defaults
  isPaused = false;
  currentTime = defaultTime;
  countdownInput.value = defaultTime;
  countdownInput.disabled = false;
  pauseBtn.textContent = 'Pause'; // Reset pause button text
}

function togglePause() {
  // Don't let pause do anything if timer isn't running
  if (!timerInterval) return;

  // Flip pause state and update button text
  isPaused = !isPaused;
  pauseBtn.textContent = isPaused ? 'Resume' : 'Pause';
}

Key Fixes & Explanations #

• State Tracking: We use global variables (timerInterval, isPaused, currentTime) to keep tabs on the timer's status. This prevents chaos like multiple timers running at once, or buttons acting when they shouldn't.
• Guard Clauses: Checks like if (!timerInterval) return; in the pause function stop buttons from firing useless actions (e.g., pausing a timer that's not running).
• Input Validation: The start function ensures we only use valid positive integers from the input—no weird behavior from non-numeric values.
• Pause/Resume Toggle: The pause button switches its text to reflect its current action, so users never get confused about what it'll do.

Why Your Original Listeners Might Have Failed #

Chances are, you ran into one of these common pitfalls:

1. Unmanaged Timers: You didn't store the setInterval result in a variable, so you couldn't clear it—leading to overlapping timers fighting each other.
2. Missing State Checks: Buttons were triggering actions even when the timer wasn't in the right state (e.g., cancel trying to reset a timer that wasn't running).
3. Scope Issues: If your timer variables were declared inside the start function, other buttons couldn't access them to pause or cancel.

Give this code a spin—let me know if you need to tweak anything for your specific use case!

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