JavaScriptで配列から変数に項目を値で渡す方法

Question

配列「fSel.sI」をループし、内部のデータに基づいて、それらを値（参照ではなく）としていくつかの関数宣言に渡そうとしています。現時点での問題は、mydrag に参照が含まれており、draggable が呼び出されるときに最後の配列項目データを使用することです。したがって、開始時:引っ張る：停止：が呼び出された場合、値は一意ではありません。ヘルプ？

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

あなたがすべき クロージャを調べる.

次のコードを試してください。

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

あなたの問題は start, drag, 、 そして stop 機能。これらはすぐには実行されません。そうするまでに、 mydrag 別の値に設定されています。これらの関数を含むコード ブロックの周囲に自己実行関数をラップすることで、クロージャを作成します。 mydrag 変わらない。

注記： パフォーマンス上の理由から、オブジェクトのプロパティに複数回アクセスする場合は、そのプロパティを参照する (または保持する) 変数を作成することをお勧めします。あなたの中で for ループ、2 つの変数を作成しました l そして sI あの店 fSel.sI.length そして fSel.sI (それぞれ) JavaScript が sI そして length ループのたびにプロパティを変更します。

Answer 2

これは、クロージャーを作成したためです。代わりにこれを試してください

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

このビデオをご覧になり、Javascriptクロージャーの強力で便利な機能をご理解ください： http://vimeo.com/1967261