class为num的元素相关函数执行异常及宽度问题求助

Hey, let’s tackle this problem you’re facing—sounds like those interval functions are sticking around longer than they should, churning through 2 extra paragraphs even after hitting that first .num element, and you’ve already tried all the fixes you can think of. Let’s break this down.

What’s Probably Happening #

From your code snippet and description, a few common issues are likely causing this:

• Asynchronous Interval Queueing: Your setInterval calls run on a timer, and even if you trigger a stop condition, there might already be pending function calls waiting in the browser’s event queue. Those will execute before the timer is fully cleared, leading to extra runs.
• Uncleared Timers: If you’re not explicitly clearing both myVar and myP when your stop condition is met, one or both intervals will keep ticking. It’s easy to forget that you have two separate timers running.
• Dynamic HTMLCollection Quirks: document.getElementsByClassName returns a live, dynamic collection. If your DOM changes while the intervals run (like adding/removing elements), this collection updates automatically—so you might be processing elements you didn’t expect, even after hitting the first .num.

Fixes to Implement Right Away #

Let’s walk through concrete steps to fix this:

1. Clear Both Timers Immediately When the Stop Condition Triggers #

Make sure the second interval (myP) gets cleared as soon as you hit your stop point. For example:

function num() {
  // Your existing logic for the .num elements
  const firstNumElem = document.querySelector('.num'); // Grab the first matching element directly
  
  // Check if you've processed the first .num and need to stop
  if (/* Your condition: e.g., firstNumElem is fully processed */) {
    clearInterval(myVar); // Stop the num interval
    clearInterval(myP);   // Stop the pelem interval too—critical!
  }
}

2. Switch to a Static NodeList Instead of Live Collection #

Replace getElementsByClassName with querySelectorAll to get a static snapshot of .num elements. This prevents the collection from updating unexpectedly if your DOM changes:

var z = document.querySelectorAll(".num"); // Static list, no automatic updates

3. Replace setInterval with Recursive setTimeout #

Intervals can cause overlapping function executions (especially with small delays like 10ms/50ms). Using recursive setTimeout ensures each run finishes before the next one starts, avoiding queue buildup:

// For the num function
let numTimer;
function num() {
  // Your num logic here
  
  if (!stopConditionMet) {
    numTimer = setTimeout(num, 10); // Schedule next run only if needed
  } else {
    clearTimeout(pelemTimer); // Clear the other timer when stopping
  }
}
numTimer = setTimeout(num, 10);

// For the pelem function
let pelemTimer;
function pelem() {
  // Your pelem logic here
  
  if (!stopConditionMet) {
    pelemTimer = setTimeout(pelem, 50);
  }
}
pelemTimer = setTimeout(pelem, 50);

4. Double-Check Your Stop Condition Logic #

Make sure you’re checking for the right trigger: are you stopping after processing the first .num element? If your condition is just ".num elements exist", the code will keep running as long as any .num is present. Be explicit—target the first element and stop once it’s handled.

Final Check #

After implementing these fixes, test again to see if the extra paragraph executions stop. The key here is eliminating asynchronous queue buildup and ensuring both timers are cleared the moment your stop condition is met.

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