Closures in a for loop and lexical environment

by

The i inside your function is evaluated when the function is executed, not when you assign it to onload. Your for loop has already completed by the time any of your onload functions fire, so all of them see the final value N.

To capture the current value of i, you need to pass it as a parameter to another function where it can be captured as a local variable:

function captureI(i) {
    return function () {
        console.log("Image " + i + " loaded");
    };
}

var images = [];
for (var i=1; i<N; i++) {
    images[i] = new Image();
    images[i].onload = captureI(i);
    images[i].src = "https://stackoverflow.com/questions/4418326/image" + i + ".png";
}

This works because every time you call captureI, a new local variable is created for that instance of captureI. In essence, you are creating N different variables and each onload function captures a different instance of the variable.

More Related Contents:

  1. How do JavaScript closures work?
  2. Javascript infamous Loop issue? [duplicate]
  3. Static variables in JavaScript
  4. var self = this?
  5. JavaScript closures vs. anonymous functions
  6. Is it true that every function in JavaScript is a closure?
  7. What underlies this JavaScript idiom: var self = this?
  8. Memory leak risk in JavaScript closures
  9. JavaScript variable binding and loop
  10. Javascript Closures and ‘this’
  11. Closure in JavaScript – whats wrong?
  12. (…()) vs. (…)() in javascript closures [duplicate]
  13. What is a practical use for a closure in JavaScript?
  14. Javascript: closure of loop?
  15. Javascript closure not working
  16. What are Closures and Callbacks?
  17. setTimeout() inside JavaScript Class using “this”
  18. Is window really global in Javascript?
  19. JavaScript scope and closure
  20. Passing values to onclick [duplicate]
  21. Passing variable in parent scope to callback function
  22. Closure in Javascript [duplicate]
  23. JavaScript Variable Scope [duplicate]
  24. Example of a circular reference in Javascript?
  25. Javascript function challenge add(1,2) and add(1)(2) both should return 3
  26. What exactly does “closure” refer to in JavaScript?
  27. How do JavaScript closures work at a low level?
  28. creating objects from JS closure: should i use the “new” keyword?
  29. How to avoid access mutable variable from closure
  30. Passing a function with arguments as an argument?

Leave a Comment