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？对不起，我有点失落。

感谢您的帮助。

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

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

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

好吧，我第一次不明白这个问题。这有点hackey，但是在不知道更多关于你的代码的情况下我会说你在创建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);

希望它对你有所帮助.. ：）

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

5 个答案: