Pass in local variable to callback function

Question

Question

How can a callback function retain a local variable from whence it was created?

Simple example

I'm creating a video player. It will have sliders to control the saturation, contrast, and hue. When the user plays with the sliders, it needs to acknowledge which slider got changed and what value it got changed to. The problem is that the name of the slider is a local variable from the scope of the creator of this onChange callback. How can this callback retain the name of the slider?

HTML

<div id="saturation">
 <div class="track"></div>
  <div class="knob"></div>
 </div>
</div>

<div id="contrast">
 <div class="track"></div>
  <div class="knob"></div>
 </div>
</div>

<div id="hue">
 <div class="track"></div>
  <div class="knob"></div>
 </div>
</div>

JS

var elements = [
 'saturation',
 'contrast',
 'gamma'
];

for(var i = 0; i < sliders.size(); i++) {
 new Control.Slider(
  $(elements[i]).down('.knob'),
  $(elements[i]).down('.track'), {
   onChange: function(value) {
    // ERROR: elements[i] is undefined
    alert(elements[i] + ' has been changed to ' + value);
   }
 }
}

score 13 · Answer 1 · answered Dec 16 '10 at 22:47

Create a copy of the variable for each callback, you can do this with an anonymous function that you pass in the value:

for(var i = 0; i < sliders.size(); i++) {

    (function(e) { // get a local copy of the current value

        new Control.Slider(
          $(elements[e]).down('.knob'),
          $(elements[e]).down('.track'), {
           onChange: function(value) {
            // ERROR: elements[e] is undefined
            alert(elements[e] + ' has been changed to ' + value);
           }
         }

     })(i); // pass in the current value
}

This way you don't reference the same i X times.

score 8 · Accepted Answer · answered Dec 16 '10 at 22:45

8

The same variable, i — who's value ends up being 4 — is bound to every function you create inside the loop. You could wrap the function in another function that you call on the spot and pass i as a parameter to that function:

for(var i = 0; i < sliders.size(); i++) {
 new Control.Slider(
  $(elements[i]).down('.knob'),
  $(elements[i]).down('.track'), {
   onChange: (function(inner_i) { function(value) {
    alert(elements[inner_i] + ' has been changed to ' + value);
   } })(i)
 }
}

answered Dec 16 '10 at 22:45

Marcelo Cantos

181,030
38
327
365

3

I believe this is the correct thing to do: onChange: function() { return function(value) { alert(elements[i] + value); } }(elements[i]) – JoJo Dec 16 '10 at 23:07
On looking at this I thought the author was being clever by omitting the return statement; Lisp-like languages simply return the last expression by default. Unfortunately javascript is not one of them :( – Brian Duncan Aug 27 '13 at 23:24

score 0 · Answer 3 · answered Dec 16 '10 at 22:48

Put your function inside a closure in this way:


for(var i = 0; i < sliders.size(); i++) {
 (function(q){
 new Control.Slider(
  $(elements[q]).down('.knob'),
  $(elements[q]).down('.track'), {
   onChange: function(value) {
    // ERROR: elements[q] is undefined
    alert(elements[q] + ' has been changed to ' + value);
   }
 }
 })(i)
}

Pass in local variable to callback function

3 Answers3

Linked