如何在 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 块中得到更新？我需要以某种方式通过引用传入 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();
    }); 
}

Answer 2

好吧，我第一次没有理解这个问题。这有点骇人听闻，但在不了解您的代码的情况下，我会在您创建 imagesArray 时创建一个 bool imagesLoaded。

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

然后，在您调用 getRandomImages() 之后，将代码放入带有 setTimeout() 的保持模式，直到 imagesLoaded = true。哦，也许可以在页面上放一些加载图形供用户查看，这样他们就不会认为你的应用程序被破坏了。

Answer 3

试试这个：

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

Answer 4

首先：为什么要使用全局变量？这是个坏主意，不要这样做。您可以在给定命名空间内的函数之间共享变量，如下所示：

var NAMESPACE = {};
NAMESPACE.example = function() { 

    var myField = '1';

    return { 

        someMethod: function() { 
             return myField;
        }, 

        anotherMethod: function() { 
            return myField;
        } 
    };
}();

其次，数组取出后怎么办？你想在页面上显示图像还是什么？您可以将 img-elements 放到页面中而不是将它们放入数组中吗？

Answer 5

也许这项工作，对我有用.. :)

$variable= new array();

$.getJSON("url", function(data){
asignVariable(data);
}

function asignVariable(data){
$variable = data;
}

console.log($variable);

希望对你有帮助.. :)