utiliza una terminar pasar parametros para matriz las instrucciones funciones funcion entre desde codigos array javascript scope prototypejs

terminar - pasar parametros a una funcion javascript desde html



Pasar la variable local a la funciĆ³n de devoluciĆ³n de llamada (3)

Esta pregunta ya tiene una respuesta aquí:

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


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.


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


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