0

私はKinetic.jsで次のコードを持っています：

    function pacmanMove(x, y , duration, bate, color) {
        var tween = new Kinetic.Tween({
            node: group,
            duration: duration,
            x: x,
            y: y,
            onFinish: function() {
                changeColor(color);
                window[bate].remove();
            }
        });
        return tween;
    }

    var eat = [];
    for(var i = 0; i < linkItemsLen; i++) {
        eat.push(pacmanMove(linkItems[i][2], 65, 1, linkItems[i][0], linkItems[i][4]));
        window[linkItems[i][0]].on('mouseover', function() {
            this.tween = eat[i];
            this.tween.play();
        });
    }

オンザフライで作成されたトゥイーンをマウスオーバー イベントに渡そうとしていますが、トゥイーンは常に定義されていないため、イベントがトリガーされるとエラー メッセージが表示されるのはTypeError: 'undefined' is not an object (evaluating 'this.tween.play')なぜですか? どうすればこれを修正できますか?

4

1 に答える 1

1

クロージャを使用して現在をキャプチャし、代わりにi使用してプライベート変数を作成してみてください。var

for(var i = 0; i < linkItemsLen; i++) {
        eat.push(pacmanMove(linkItems[i][2], 65, 1, linkItems[i][0], linkItems[i][4]));
        window[linkItems[i][0]].on('mouseover', (function(index) { //create closure to capture current index.
           return function(){
              //Use var instead
              var tween = eat[index];
              tween.play();
            }
        })(i));
    }

ループ内にイベント ハンドラーをアタッチしているため、ループの最後で、 is は配列の外側=> returnsiと等しくなります。すべてのイベント ハンドラーは、現在の を失います。linkItemsLeneateat[i]undefinedi

同じ手法を使用して、トゥイーンを関数に直接渡すこともできます。

for(var i = 0; i < linkItemsLen; i++) {
            eat.push(pacmanMove(linkItems[i][2], 65, 1, linkItems[i][0], linkItems[i][4]));
            window[linkItems[i][0]].on('mouseover', (function(tween) { //create closure to capture current eat[i].
               return function(){
                  tween.play();
                }
            })(eat[i]));//Pass the current eat[i]
        }
于 2013-09-14T13:43:12.600 に答える