如何编辑JQuery $ .each函数中的全局变量？ [英] How do I edit a global variable in a JQuery $.each function?

问题描述

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

我有以下功能：

 函数getRandomImages（limit）{
 imagesArray = new Array（）; 
 $ .getJSON（'createImageArray.php'，{limit：limit}，function（data）{
 $ .each（data，function（i）{
 imagesArray [i] = data [i]; // imagesArray是全局声明的
}）; 
}）; 
} 
  

getJSON正确地抓取JSON对象。它返回如下所示的内容：

  {image0：images / 19.10.FBB9.jpg，image1：图像/ 8.16.94070.jpg， 图像2： 图像/ 8.14.47683.jpg， 图像3： 图像/ 8.15.99404.jpg， 图像4： 图像/ 8.13.20680.jpg ，image5：images / 21.12.9A.jpg，image6：images / 8.17.75303.jpg} 
  

我正在调试并确信data [i]正确包含从JSON对象获取的图像路径。然而，在调用getRandomImages（）之后，我查看了我的全局图像阵列并注意到没有任何改变。我猜这是创建imagesArray的副本，而不是抓取实际的。

有人可以告诉我我需要做什么以便我的全局图像阵列得到更新$ .each块？我需要通过引用以某种方式传递imagesArray？抱歉，我有点遗失。

感谢您的帮助。

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

我不知道如何重组我的代码以将.getJSON的异步性质考虑在内。

解决方案

这里发生的是 getJSON 异步调用。所以这个函数立即返回，并且它后面的代码在稍后的某个时刻被调用。只有这样才能更新imagesArray。

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

编辑：使用 async 选项（链接）。使用通用 $。ajax 函数或设置AJAX全局选项。我不推荐这样做的原因是，它锁定了浏览器。如果您的服务器无法及时响应，用户将无法使用他/她的浏览器。

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

  function getRandomImages（limit）{
 imagesArray = new Array（）; 
 $ .getJSON（'createImageArray.php'，{limit：limit}，function（data）{
 $ .each（data，function（i）{
 imagesArray [i] = data [i]; // imagesArray是全局声明的
}）; 
}）; 
 processImages（）; 
} 
  

do

  function getRandomImages（limit）{
 imagesArray = new Array（）; 
 $ .getJSON（'createImageArray.php'，{limit：limit}，function（data）{
 $ .each（data，function（i）{
 imagesArray [i] = data [i]; // imagesArray是全局声明的
}）; 
 processImages（）; 
}）; 
} 
  

Ok, so that title probably doesn't explain my question well. Hopefully this makes sense. This is also my first application with jQuery, so forgive me if I'm doing something dumb.

I have the following function:

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.
        });
    }); 
}

The getJSON is correctly grabbing the JSON object. It returns something like this:

{"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"}

I was debugging and am confident that data[i] correctly contains the image path as grabbed from the JSON object. However, after getRandomImages() is called, I look at my global imagesArray and notice that nothing has been changed. I'm guessing it's creating a copy of the imagesArray instead of grabbing the actual one.

Can someone tell me what I need to do so that my global imagesArray gets updated in the $.each block? Do I need to pass in imagesArray by reference somehow? Sorry, I'm a bit lost.

Thanks for the help.

EDIT: Some background information. I am populating an array of random image locations from the DB. I don't want to load all the images from the db to an array at once, because there are just too many. So, I have a counter which keeps track of where I am in my image array. Once I'm done with an image, I move the pointer to the next image. If I reach the end, I need to grab more random images. That's where the above js function gets called; it calls createImageArray.php which grabs x random images from the db and returns an array. I then want to store those image locations in my global imagesArray.

I'm not sure how I would restructure my code to take .getJSON's asynchronouos nature into account.

解决方案

What happens here is that the getJSON is called asynchronously. So the function returns immediately and the code inside it is called at some point later at time. It was only then that the imagesArray would be updated.

You could have the getJSON behave synchronously, but I wouldn't recommend it. Instead I recommend restructuring your code to take into consideration the asynchronous nature of AJAX requests.

EDIT: For making a synchronous request use the async option (link). Use the general $.ajax function or set AJAX global options. The reason that I don't recommend this is, that it locks the browser. If your server fails to respond in a timely fashion, the user will not be able to use his/her browser.

It isn't that difficult to restructure your code. Just move your logic for handling image arrays in the callback function. For example instead of:

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();
}

do

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();
    }); 
}

这篇关于如何编辑JQuery $ .each函数中的全局变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！