如何实现连续点击同一按钮时的数值生成器叠加功能？

Hey there! Let's break down why your money function is acting up when you double-click the button, and how to fix it.

What's Causing the Problem? #

Your current code has two critical issues leading to the flashing and abnormal values:

1. Multiple overlapping timers: Every time you click the button, you start a new setInterval() timer. Double-clicking means two timers run simultaneously, both trying to increment the same clicks value. They overwrite each other constantly, causing the flickering effect.
2. Unscoped & misread variable: clicks isn't declared with let/const, so it becomes a global variable prone to unexpected changes. Plus, using nodeValue to get the element's content is incorrect here—you should use innerHTML instead.

The Fixed Code #

Here's a revised version that resolves both problems:

// Track the active timer to avoid duplicates
let activeTimer = null;

function money() {
  // Clear any existing timer before starting a new one
  if (activeTimer) {
    clearInterval(activeTimer);
  }

  // Get the current value and convert it to a number (prevents string concatenation bugs)
  let clicks = Number(document.getElementById("demo").innerHTML);

  // Start a fresh timer and save its ID
  activeTimer = setInterval(function() {
    clicks += 1;
    document.getElementById("demo").innerHTML = clicks;
  }, 1000);

  // Disable the button immediately to prevent accidental double-clicks
  document.getElementById("btn").disabled = true;
}

Key Changes Explained #

• Timer management: We added activeTimer to store the ID of the running timer. Every button click first clears any existing timer, ensuring only one timer runs at a time.
• Proper value handling: Using Number() converts the element's text content from a string to a number, so clicks += 1 does arithmetic instead of string concatenation (no more "1" + 1 turning into "11").
• Scoped variable: clicks is now declared with let inside the function, keeping it isolated from other code and reducing unexpected side effects.
• Prevent accidental clicks: Disabling the button right when it's clicked stops users from triggering multiple timers in quick succession.

Bonus: Toggle Start/Stop Functionality #

If you want users to be able to pause and resume earning, here's a more user-friendly toggle version:

let activeTimer = null;
let isEarning = false;

function toggleEarning() {
  if (isEarning) {
    // Stop the timer
    clearInterval(activeTimer);
    document.getElementById("btn").textContent = "Start Earning";
  } else {
    // Start earning
    let clicks = Number(document.getElementById("demo").innerHTML);
    activeTimer = setInterval(function() {
      clicks += 1;
      document.getElementById("demo").innerHTML = clicks;
    }, 1000);
    document.getElementById("btn").textContent = "Stop Earning";
  }
  isEarning = !isEarning;
}

This turns the button into a start/stop toggle, eliminating double-click issues entirely.

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