0

私が見ている問題を示すために、ここに簡単なページがあります。

多次元配列を定義し、関数の外に配置しています。ajaxを使用してデータを送り返し、配列をコードで配列化すると、データが一時配列に追加されているように見えます。

すべてのajaxが返された後で関数の配列にアクセスしようとすると、最後の行にアクセスすることしかできません。他のすべての行は空の文字列を返します。

コード：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id=result>
</div>
<textarea id="the_code"></textarea>
    <script language=javascript>
                var images = [[0,"/upload/cut/1339722764_0_0.png", ""],[1,"/upload/cut/1339722764_0_1.png", ""]];                   

                var numOfImages=1;
                var recievedImages=0;
                var num_row=1;
                var num_col=2;
                var x=0;

                function recieveCode(codeid,emcode)
                {       
                    recievedImages=recievedImages+1;
                    images[codeid][2]=emcode;
                    $('#result').html('Generating: ' + Math.round(((recievedImages/numOfImages) * 100)) + '%');   

                    if (recievedImages == numOfImages)
                    {                   
                        var i = 0;
                        var j = 0;
                        var imageID = "";
                        for(i = 0; i < num_row ; i++)
                        {
                            for(j = 0; j < num_col; j++)
                            {
                                if (j < num_col - 1)
                                {                                   
                                    imageID = imageID + "[[" + images[ (i*num_col) + j][2] + "]] "; 
                                }
                                else
                                {                                       
                                    imageID = imageID + "[[" + images[(i*num_col) + j][2] + "]]\n";
                                }
                            }

                        }
                        $('#the_code').val(imageID);
                    }
                }   
                for (x=0;x<numOfImages;x++)
                {
                    $.ajax(
                    {   
                        type: "POST",
                        data: {album : '223427061111247',image: images[x][1],auth: 'AAAB0ghwtqi0BAFI6xrLYurkQZBT2KWaiKUL3Jxbof3B5xdCIjZBpoImF0Q2ZAaqBC9ofzSPhGoCejyVaYNwIjC44Bay8gIR9Nj38KtGIxyhhgybbIOI' },
                        url: 'upload_emoticode.php',
                        success:function(msg){   recieveCode(images[x][0],msg); }
                    }
                    );
                }                                   
    </script>
</body>

4

2 に答える 2

1

問題は、ajax への呼び出しが非同期であるため、recieveCode呼び出されるまでに、x常に と等しいことnumOfImagesです。次のように、各画像をクロージャーにカプセル化する自己呼び出し関数で ajax への呼び出しをラップすることで、これを修正できます。

for (x=0;x<numOfImages;x++)
{
    (function(image){
        $.ajax(
        {   
            type: "POST",
            data: {album : '223427061111247',image: image[1],auth: 'AAAB0ghwtqi0BAFI6xrLYurkQZBT2KWaiKUL3Jxbof3B5xdCIjZBpoImF0Q2ZAaqBC9ofzSPhGoCejyVaYNwIjC44Bay8gIR9Nj38KtGIxyhhgybbIOI' },
            url: 'upload_emoticode.php',
            success:function(msg){   recieveCode(image[0],msg); }
        }
        );
    })(images[x]);
}
于 2012-06-15T05:59:42.567 に答える
1

これらの Ajax 呼び出しは非同期であるため、xのスコープが正しくありません。次のようなクロージャを作成してみてください。

(function(currentX) {
    $.ajax({   
        type: "POST",
        data: {album : '223427061111247',image: images[currentX][1],auth: 'AAAB0ghwtqi0BAFI6xrLYurkQZBT2KWaiKUL3Jxbof3B5xdCIjZBpoImF0Q2ZAaqBC9ofzSPhGoCejyVaYNwIjC44Bay8gIR9Nj38KtGIxyhhgybbIOI' },
        url: 'upload_emoticode.php',
        success:function(msg){   recieveCode(images[currentX][0],msg); }
    });
)(x);

このように考えてください。Ajax 呼び出しを行うと、サーバーが応答するまでループが実行され続けます。成功のコールバックが呼び出されるまでに、変数iはすでに数回インクリメントされています。上記の変更されたコードは、ループの反復ごとにiのコピーを作成します。

于 2012-06-15T06:00:12.247 に答える