title: Work around scope closure in async call
body: <p>This is a very simplified snippet code to illustrate the problem.</p>
  
  <pre><code>var srcs = ["url1", "url2", "url3"];
  
  for (var i = 0; i &lt; srcs.length; i++) {
  
      var img = document.createElement("img");
  
      var tryBrokeClosure = i;
  
      img.onload = function() {
          console.log(tryBrokeClosure);
      };
  
      img.src = srcs[i];
  }
  </code></pre>
  
  <p>As you probably guessed, I was expecting:</p>
  
  <blockquote>
    <p>0<br/>1<br/>2</p>
  </blockquote>
  
  <p>But got:</p>
  
  <blockquote>
    <p>2<br/>2<br/>2  </p>
  </blockquote>
  
  <p>So my question is: How can I safely pass the <code>i</code> variable to an async function without getting altered by the original scope?</p>
  
  <p><strong>EDITED:</strong></p>
  
  <p>I have this <a href="https://stackoverflow.com/a/750506/1233788">answer</a> to a very similar <a href="https://stackoverflow.com/q/750486/1233788">question</a>, but this answer use the creation of a function to break the closure, something that I can't do here.</p>