Cómo pasar por elementos por valor de una matriz a una variable en Javascript

Question

Estoy tratando de hacer un bucle a través de una matriz " fSel.sI " ;, y en base a los datos que contiene, pasarlos como valores (no de referencia) a varias declaraciones de funciones. En este momento, el problema es que mydrag contiene una referencia y, como se puede arrastrar, se utiliza el último dato de la matriz. Por lo tanto, cuando se llama a iniciar: arrastrar: detener: los valores no son únicos. Ayuda?

makeDraggable : function() {
        // create new draggable
        for (var i = 0; i < fSel.sI.length; i++) {
            mydrag = fSel.sI[i];
            $("#" + mydrag).draggable({
                cancel: [''],
                distance: 5,
                containment: "#fWorkspace",
                handle: mydrag,
                start: function() { dragRegister(mydrag)},
                drag: function() { dragItems(mydrag)},
                stop: function() { dragStop(mydrag)}
            });
        }
    },

Answer 1

Debería consultar los cierres .

Prueba el siguiente código:

makeDraggable : function() {
        // create new draggable
        for (var i = 0, l = fSel.sI.length, sI = fSel.sI; i < l; i++) {
                var mydrag = sI[i];
                (function(mydrag) {
                            $("#" + mydrag).draggable({
                                    cancel: [''],
                                    distance: 5,
                                    containment: "#fWorkspace",
                                    handle: mydrag,
                                    start: function() { dragRegister(mydrag); },
                                    drag: function() { dragItems(mydrag); },
                                    stop: function() { dragStop(mydrag); }
                            });
                })(mydrag);
         }
},

Su problema es con las funciones start , arrastrar y stop . No se ejecutan inmediatamente; en el momento en que lo hacen, mydrag se ha establecido en otro valor. Al ajustar una función de ejecución automática alrededor del bloque de código que contiene estas funciones, creamos un cierre, donde mydrag no cambia.

Nota: Por razones de rendimiento, cuando se accede a las propiedades de un objeto más de una vez, es mejor crear una variable que haga referencia (o contenga) la propiedad. En su for , he creado dos variables l y sI que almacenan fSel.sI.length y fSel.sI (respectivamente) para que JavaScript no tenga que buscar las propiedades sI y length cada vez que esté en el bucle.

Answer 2

Esto se debe a que estás creando un cierre. Intenta esto en su lugar

makeDraggable : function() {
        // create new draggable
        for (var i = 0; i < fSel.sI.length; i++) {
                mydrag = fSel.sI[i];
                $("#" + mydrag).draggable({
                        cancel: [''],
                        distance: 5,
                        containment: "#fWorkspace",
                        handle: (function(mydrag){return mydrag;}(mydrag)),
                        start: (function(mydrag){return function() { dragRegister(mydrag)};}(mydrag)),
                        drag: (function(mydrag){return function() { dragItems(mydrag)};}(mydrag)),
                        stop: (function(mydrag){return function() { dragStop(mydrag)};}(mydrag))
                });
        }
    },

Eche un vistazo a este video para comprender el poder y la utilidad de los cierres de Javascript: http://vimeo.com/1967261