How to Preserve Variable Values in JavaScript Event Listeners: Block-Scoped Variables or Closures?

How to Preserve Variable Values in Event Listeners in JavaScript

Consider the following code snippet:

<code class="javascript">for (var i = 0; i < results.length; i++) {
  marker = results[i];
  google.maps.event.addListener(marker, 'click', function() {
    change_selection(i);
  });
}

In this code, the value of i used in the event listener is always the final value of results.length after the loop terminates. To resolve this issue, we need to pass the value of i to the event listener during its creation.

Using Block-Scoped Variables (ES6 and Later)

In modern browsers, we can use block-scoped variables such as let or const. These variables are only accessible within the block they are defined in. By using a block-scoped variable, we can ensure that the value of i at the time of event creation is preserved.

<code class="javascript">for (let i = 0; i < results.length; i++) {
  let marker = results[i];
  google.maps.event.addListener(marker, 'click', () => change_selection(i));
}</code>

Creating a Closure (Older Browsers)

In older browsers that do not support block-scoped variables, we can create a closure to preserve the value of i. A closure is a function that encapsulates another function, creating a nested scope. By passing i as the first argument to an anonymous function, we can create a closure that preserves the value of i.

<code class="javascript">for (var i = 0; i < results.length; i++) {
  (function (i) {
    marker = results[i];
    google.maps.event.addListener(marker, 'click', function() {
      change_selection(i);
    });
  })(i);
}</code>

By using either the block-scoped variables or the closure technique, we can ensure that each event listener uses the value of i that was intended.

The above is the detailed content of How to Preserve Variable Values in JavaScript Event Listeners: Block-Scoped Variables or Closures?. For more information, please follow other related articles on the PHP Chinese website!