2

どういうわけか、私のカウンター変数は子関数に渡されません。非同期の振る舞いが原因だと思いますが、実際には手がかりがありません。助けてください。

$(document).ready(function() {
    var imgArray = new Array();
    $("canvas").each(function(i) {
        imgArray[i] = new Image();
    });
    $.each(imgArray, function(i) {
        alert(i);
        //correct output

        this.onload = function() {
            alert(i);
            //"undefined"

            var width = this.width,
                height = this.height;
            var context = $("canvas")[i].getContext("2d");
            //here's the error

            /* more code */
        };
        this.src = "PATH";      
    });
});

では、どのようにして適切なキャンバスの値を渡すことができますか？
助けてくれてありがとう！

4

2 に答える 2

1

あなたが経験している問題は、JavaScriptがクロージャをサポートする方法の性質によるものです。それは問題がバグであるということではありません。正常に動作しています。onloadメソッドは、すでに最後まで繰り返されてから実行されてiいますundefined。実行可能な解決策は、クロージャを有利に使用し、関数の作成を次のような呼び出しでラップすることです。this.onload = (function(index) { /* ... */ })(i);

onloadこれにより、作成しているメソッドに内部的にアクセスできる変数に値が期待どおりに格納されることが保証されます。

于 2013-01-03T16:10:13.597 に答える
0

あなたのこの部分をこの部分に修正してください。

   this.onload = (function(a) {
            alert(a);
            //"undefined"

            var width = this.width,
                height = this.height;
            var context = $("canvas")[a].getContext("2d");
            //here's the error

            /* more code */
        })(i);

iループの反復の場合と同じように値がキャッチされるように、クロージャーを作成しました。

簡単な例を示します：

var i=0;

i++;
alert(i) //1

i++;
alert(i) //2


alert(i) //2 !!!

これはあなたのコードで実際に起こることです。

于 2013-01-03T16:06:23.950 に答える