jQuery.each与setTimeout兼容性问题技术求助

Hey, let's break down the issues you're facing with jQuery.each() and setTimeout()—this is a super common pitfall in async JavaScript, so I’ve got you covered. Based on your description, the core problems are likely related to closure traps, lost this context, and async timing conflicts between your delayed class addition and the input traversal logic. Let's walk through fixes step by step.

First: Fix the Closure Trap in Loops #

When you use setTimeout() inside a jQuery.each() loop, the async callback doesn’t capture the current iteration’s element—by the time the timeout fires, the loop has finished, and all callbacks reference the last element in the loop. This is the most frequent culprit here.

Example of the Problematic Code

Say your original traversal logic looks something like this:

$('input').not($currentInput).each(function(index, elem) {
  setTimeout(function() {
    // Oops—this will always reference the last input in the loop!
    const $related = $(elem).siblings('.elem1, .elem2');
    if (!$related.hasClass('focused')) return;
    // Your intended logic here
  }, 200);
});

Fix 1: Use an IIFE to Capture Iteration Variables

Wrap the timeout in an Immediately Invoked Function Expression (IIFE) to create a separate scope for each loop iteration, preserving the current element reference:

$('input').not($currentInput).each(function(index, elem) {
  // Pass the current elem into the IIFE to lock in its value
  (function(currentElem) {
    setTimeout(function() {
      const $related = $(currentElem).siblings('.elem1, .elem2');
      if (!$related.hasClass('focused')) return;
      // Your logic here now targets the correct element
    }, 200);
  })(elem);
});

Fix 2: Use ES6 let for Block Scoping

If your project supports ES6+, just declare the element with let—it creates a block-level scope for each iteration, so each timeout gets its own copy of the variable:

$('input').not($currentInput).each(function(index, elem) {
  let currentElem = elem; // `let` locks the value to this iteration
  setTimeout(function() {
    const $related = $(currentElem).siblings('.elem1, .elem2');
    if (!$related.hasClass('focused')) return;
    // Your logic here
  }, 200);
});

Second: Fix Lost this Context #

If you’re using this inside the timeout callback to reference the current input, it’ll default to window instead of the DOM element. Here are two easy fixes:

Fix 1: Use jQuery.proxy() to Bind Context

$.proxy() lets you explicitly set what this refers to in the callback:

$('input').not($currentInput).each(function() {
  // Bind `this` (the current input) to the callback
  const boundCallback = $.proxy(function() {
    const $related = $(this).siblings('.elem1, .elem2');
    if (!$related.hasClass('focused')) return;
    // `this` now correctly points to the current input
  }, this);
  setTimeout(boundCallback, 200);
});

Fix 2: Use ES6 Arrow Functions

Arrow functions inherit the this value from their outer scope, so no extra binding is needed:

$('input').not($currentInput).each(function() {
  setTimeout(() => {
    // `this` matches the outer `each` callback's context (current input)
    const $related = $(this).siblings('.elem1, .elem2');
    if (!$related.hasClass('focused')) return;
    // Your logic here
  }, 200);
});

Third: Fix Async Timing Conflicts #

You mentioned one .focused class is added with a delay. If you run your traversal check immediately after clicking, the delayed class might not exist yet, leading to incorrect state checks. To fix this, run the traversal after the delayed class is added:

$('input').on('click', function() {
  const $currentInput = $(this);
  const $elem1 = $currentInput.siblings('.elem1');
  const $elem2 = $currentInput.siblings('.elem2');

  // Add first class immediately
  $elem1.addClass('focused');
  // Add second class with delay, then run the traversal check
  setTimeout(function() {
    $elem2.addClass('focused');
    // Now both classes are present—safe to check other inputs
    $('input').not($currentInput).each(function(index, elem) {
      (function(currentElem) {
        const $related = $(currentElem).siblings('.elem1, .elem2');
        if (!$related.hasClass('focused')) return;
        // Your logic here
      })(elem);
    });
  }, 300);
});

Quick Recap #

To make jQuery.each() play nice with setTimeout():

• Lock in loop variables with IIFEs or let to avoid closure traps
• Preserve this context using $.proxy() or arrow functions
• Align async operations so your traversal runs only after delayed updates are complete

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