含setTimeout的函数多次调用时，状态指示器移除异常求助

First off, let's break down why only the first process's indicator is getting removed when using setTimeout:

Root Causes #

• Global Variable Overwrite: Your idh variable is declared without let/const, making it a global variable. Every time working_handle runs for a new process, it overwrites idh with the latest ID. When the timeout fires later, it only uses the last stored ID instead of the one tied to the specific process that finished.
• Critical Typo: Your code snippet shows if (state = ...) which is an assignment, not a comparison. That's almost certainly a mistake—you need state === to properly check the state value.

Corrected Function #

Here's the fixed version that preserves the delay while handling multiple processes correctly:

function working_handle(id, state) {
  // Scope idh locally to each function call with const
  const idh = id.replace(/^#/, '');
  const targetElement = document.getElementById(idh);
  
  if (!targetElement) return; // Exit early if the target div doesn't exist

  if (state === 'running') {
    // Add your status indicator logic here (e.g., a spinner class or HTML)
    targetElement.classList.add('process-running');
  } else if (state === 'finished') {
    // Use setTimeout with the locally scoped element reference
    setTimeout(() => {
      targetElement.classList.remove('process-running');
    }, 500); // Adjust delay to your preference
  }
}

Key Fixes Explained #

1. Local Variable Scoping: Using const idh and const targetElement ensures each invocation of working_handle keeps its own copy of the ID and element reference. This guarantees the timeout callback targets the correct element every time, even when multiple processes run in parallel.
2. Guard Clause: The if (!targetElement) return; line prevents errors if the target div doesn't exist, making the function more robust.
3. Correct State Comparison: Swapped state = to state === to properly check the state value instead of accidentally assigning it.
4. Efficient Element Reference: Storing the element in a local variable means we don't have to re-query the DOM in the timeout callback, which is faster and avoids potential issues if the element's ID changes unexpectedly.

Additional Tips for Edge Cases #

• If you're adding HTML content (like a spinner icon) as an indicator, track it per element using a data attribute to avoid removing the wrong content:

  if (state === 'running') {
    const spinner = document.createElement('span');
    spinner.className = 'spinner-icon';
    spinner.id = `spinner-${idh}`;
    targetElement.appendChild(spinner);
    targetElement.dataset.spinnerId = spinner.id;
  } else if (state === 'finished') {
    setTimeout(() => {
      const spinner = document.getElementById(targetElement.dataset.spinnerId);
      if (spinner) spinner.remove();
      delete targetElement.dataset.spinnerId;
    }, 500);
  }
  

• To prevent race conditions (e.g., a process restarts before the timeout finishes), clear any existing timeout for the element before setting a new one:

  if (state === 'finished') {
    // Clear existing timeout if the process restarted mid-delay
    const existingTimeout = targetElement.dataset.timeoutId;
    if (existingTimeout) clearTimeout(existingTimeout);
    
    const newTimeout = setTimeout(() => {
      targetElement.classList.remove('process-running');
      delete targetElement.dataset.timeoutId;
    }, 500);
    targetElement.dataset.timeoutId = newTimeout;
  }
  

This should resolve the issue where only the first process's indicator is removed, while keeping the smooth delay you want.

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