我这里有一个简单的页面来演示我所看到的问题。
我正在定义一个多维数组,在我的函数之外填充它。当我使用 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>
问题是你对 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]);
}
这些 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 的副本。