Why Does Nested `setTimeout` in a JavaScript `for` Loop Print Non-Consecutive Values?

Understanding the Issue: Non-Consecutive Value Printing in setTimeout Nested in for-Loop

In JavaScript, asynchronous functions like setTimeout schedule a callback to execute after a delay. When placed within a loop, this can lead to unexpected behavior where the variables accessed by the callback may be out of sync with the loop's state.

The Example: Alerting Incorrect Values

Consider the provided script:

for (var i = 1; i <p>This code intends to alert the values 1 and 2 consecutively, but instead outputs 3 twice. The reason lies in the asynchronous nature of setTimeout, which creates a callback that reference the current value of i.</p><p><strong>Passing i Without a Function String</strong></p><p>To address this issue and ensure consecutive value printing, we need to create a distinct instance of i for each setTimeout callback. Here's a solution:</p><pre class="brush:php;toolbar:false">function doSetTimeout(i) {
  setTimeout(function() {
    alert(i);
  }, 100);
}

for (var i = 1; i <p>By creating an explicit function for each callback and passing i as an argument, we create separate copies of i for each iteration of the loop. This allows the callbacks to reference the correct value of i when executed, ensuring the consecutive printing of 1 and 2.</p>

The above is the detailed content of Why Does Nested `setTimeout` in a JavaScript `for` Loop Print Non-Consecutive Values?. For more information, please follow other related articles on the PHP Chinese website!