Pass in lokalen Variablen zu Callback-Funktion

Question

Frage

Wie kann eine Callback-Funktion von einer lokalen Variablen behalten, woher sie erstellt wurde?

Einfaches Beispiel

Ich bin ein Video-Player zu schaffen. Es wird Schieberegler haben, um die Sättigung, den Kontrast und den Farbton zu steuern. Wenn der Benutzer mit den Schiebereglern spielt, muss er bestätigen, welcher Schieberegler geändert wurde und welchen Wert er geändert hat. Das Problem ist, dass der Name des Sliders eine lokale Variable aus dem Bereich des Erstellers dieses OnChange-Callbacks ist. Wie kann dieser Rückruf den Namen des Schiebereglers behalten?

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); 
    } 
} 
} 

Answer 1

Die gleiche Variable, i - dessen Wert endet 4 wird - wird jeder Funktion, die Sie innerhalb der Schleife erstellen gebunden. Sie könnten die Funktion in einer anderen Funktion wickeln, die Sie auf der Stelle anrufen und i als Parameter an diese Funktion übergeben:

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) 
} 
} 

Answer 2

für jeden Rückruf eine Kopie der Variablen erstellen, können Sie dies mit einer anonymen Funktion tun, dass Sie passieren den Wert:

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 
} 

auf diese Weise können nicht die gleichen i X mal verweisen kann.

Answer 3

Setzen Sie Ihre Funktion in einem Verschluss auf diese Weise:

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) 
}