terminar - pasar parametros a una funcion javascript desde html

Pasar la variable local a la función de devolución de llamada

Question

Esta pregunta ya tiene una respuesta aquí:

• Cierre de JavaScript dentro de los bucles - ejemplo práctico simple 31 respuestas

Pregunta

¿Cómo puede una función de devolución de llamada retener una variable local desde donde se creó?

Ejemplo simple

Estoy creando un reproductor de video. Tendrá controles deslizantes para controlar la saturación, el contraste y el tono. Cuando el usuario juega con los controles deslizantes, necesita confirmar qué control deslizante cambió y en qué valor cambió. El problema es que el nombre del control deslizante es una variable local del alcance del creador de esta devolución de llamada onChange. ¿Cómo puede esta devolución de llamada conservar el nombre del control deslizante?

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

Cree una copia de la variable para cada devolución de llamada; puede hacerlo con una función anónima a la que pase el valor:

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
}

De esta forma, no hace referencia a las mismas i X veces.

Answer 2

La misma variable, i - cuyo valor termina siendo 4 - está ligada a cada función que creas dentro del ciclo. Puede envolver la función en otra función que llame en el acto y pasarle como parámetro a esa función:

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 3

Ponga su función dentro de un cierre de esta manera:

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