jquery - 如何在 JQuery $.each 函数中编辑全局变量？

Question

好吧，这个标题可能不能很好地解释我的问题。希望这是有道理的。这也是我第一个使用 jQuery 的应用程序，所以如果我做了一些愚蠢的事情，请原谅我。

我有以下功能:

function getRandomImages(limit) {
    imagesArray = new Array();
    $.getJSON('createImageArray.php', {limit: limit}, function(data) {
        $.each(data, function(i) {
            imagesArray[i] = data[i];  //imagesArray is declared globally.
        });
    }); 
}

getJSON 正确获取 JSON 对象。它返回类似这样的内容:

{"image0":"images/19.10.FBB9.jpg","image1":"images/8.16.94070.jpg","image2":"images/8.14.47683.jpg","image3":"images/8.15.99404.jpg","image4":"images/8.13.20680.jpg","image5":"images/21.12.9A.jpg","image6":"images/8.17.75303.jpg"}

我正在调试，并且确信 data[i] 正确包含从 JSON 对象获取的图像路径。但是，在调用 getRandomImages() 后，我查看全局 imagesArray 并发现没有任何更改。我猜它正在创建 imagesArray 的副本，而不是获取实际的副本。

有人可以告诉我需要做什么才能使我的全局 imagesArray 在 $.each block 中更新吗？我需要以某种方式通过引用传递 imagesArray 吗？抱歉，我有点迷失了。

感谢您的帮助。

编辑:一些背景信息。我正在从数据库填充随机图像位置的数组。我不想一次将数据库中的所有图像加载到数组中，因为数量太多了。所以，我有一个计数器来跟踪我在图像数组中的位置。处理完一张图像后，我会将指针移动到下一张图像。如果我到达终点，我需要抓取更多随机图像。这就是上面的 js 函数被调用的地方；它调用 createImageArray.php 从数据库中获取 x 随机图像并返回一个数组。然后我想将这些图像位置存储在我的全局 imagesArray 中。

我不确定如何重构我的代码以考虑 .getJSON 的异步性质。

Answer 1

这里发生的是异步调用getJSON。因此该函数立即返回，并在稍后的某个时间点调用其中的代码。只有这样，imagesArray 才会更新。

您可以让 getJSON 同步运行，但我不推荐它。相反，我建议重构您的代码以考虑 AJAX 请求的异步性质。

编辑:要发出同步请求，请使用async选项( link )。使用通用 $.ajax 函数或设置 AJAX 全局选项。我不推荐这样做的原因是，它会锁定浏览器。如果您的服务器未能及时响应，用户将无法使用他/她的浏览器。

重构代码并不困难。只需在回调函数中移动处理图像数组的逻辑即可。例如代替:

function getRandomImages(limit) {
    imagesArray = new Array();
    $.getJSON('createImageArray.php', {limit: limit}, function(data) {
        $.each(data, function(i) {
                imagesArray[i] = data[i];  //imagesArray is declared globally.
        });
    }); 
   processImages();
}

做

function getRandomImages(limit) {
    imagesArray = new Array();
    $.getJSON('createImageArray.php', {limit: limit}, function(data) {
        $.each(data, function(i) {
                imagesArray[i] = data[i];  //imagesArray is declared globally.
        });
        processImages();
    }); 
}