Variable in JavaScript callback functions always gets last value in loop? [duplicate]

by

The problem is that you are ‘closing’ over the same variable.

var does not declare a variable1. It simply annotates a ‘stop look-up’ for an identifier within a given execution context.

Please see Javascript Closures “FAQ Notes” for all the nice details. The sections on ‘execution context’ and ‘scope chain’ are most interesting.

The common idiom is perform a double-binding to create a new execution context.

E.g.

var k
for (k = 1; k < 10; k++) {
  setTimeout((function (_k) {
    return function () {
      alert(_k)
    }
  })(k), k * 100)
}

As of JavaScript 5th Edition there is Function.bind (it can also be implemented in 3rd edition such as bind from prototype.js), which can be used as such:

var k
for (k = 1; k < 10; k++) {
  setTimeout((function () {
     alert(this)
  }).bind(k), k * 100)
}

1 This construct is referred to as a Variable Declaration in the ECMAScript specification. However, this statements, as misleading as it may be viewed, is stressed to bring home a point: also see “variable hoisting”.

More Related Contents:

  1. addEventListener vs onclick
  2. How to trigger event in JavaScript?
  3. How to pass arguments to addEventListener listener function?
  4. JS li tag onclick not working on IE8
  5. addEventListener using for loop and passing values [duplicate]
  6. addEventListener in Internet Explorer
  7. addEventListener not working in IE8
  8. MSIE and addEventListener Problem in Javascript?
  9. add event listener on elements created dynamically
  10. Javascript removeEventListener not working
  11. Javascript – How to detect if document has loaded (IE 7/Firefox 3)
  12. Javascript “addEventListener” Event Fires on Page Load [duplicate]
  13. How to check whether dynamically attached event listener exists or not?
  14. Cannot read property ‘addEventListener’ of null
  15. Binding multiple events to a listener (without JQuery)?
  16. How to remove all listeners in an element? [duplicate]
  17. Removing an anonymous event listener
  18. Adding click event handler to iframe
  19. Want to add “addEventListener” on multiple elements with same class [duplicate]
  20. JavaScript listener, “keypress” doesn’t detect backspace?
  21. Why Firefox says that window.event is undefined? (call function with added event listener)
  22. addEventListener on a querySelectorAll() with classList [duplicate]
  23. addEventListener on NodeList [duplicate]
  24. addEventListener vs onclick
  25. Code inside DOMContentLoaded event not working
  26. Javascript multiple dynamic addEventListener created in for loop – passing parameters not working
  27. reactjs event listener beforeunload added but not removed
  28. addEventListener Two Functions
  29. Javascript scope addEventListener and this
  30. Listen to multiple keydowns

Leave a Comment