Question

我知道我违反了javascript代码中的范围规则，我很确定我知道什么是错的。我只是不明白那些使我做错了什么或如何解决它的规则。

我正在创建一个包含照片库的应用程序。系统一次显示9张照片。当用户想要查看新照片时，他可以单击屏幕右侧的箭头。此操作会向服务器查询更多照片，这些照片随后将作为json列表返回。如果用户单击屏幕左侧的箭头，他可以查看以前看过的照片。出于这个原因，缓存客户端的所有照片URL是有意义的。

这个缓存是在一个全局变量中完成的（我知道它很糟糕，但我不懂JS，也不知道如何使其工作）名为photoData。 photoData是一个二维数组，包含一组照片，其中出现了特定的照片（基本上是用户在到达此照片之前点击了右箭头的次数）以及该组中出现的所有照片网址。我遇到的问题是照片会在我的GetNewPhotos（）函数中正确填充photoData，但是在函数超出范围后它们会离开数组。

在发布我的代码之前，请允许我说任何批评都是受欢迎的。我2天前用javascript开始，并不是很好。幸运的是，jQuery完成了大部分工作。

这是我的代码：

var photoData = new Array();
var currentPhotoSet = 1;
var maxPhotoSet = 1;

//I originally tried using a closure to avoid global variables and it wasn't working properly, but this is still lingering here.
(function() 
{
    $(document).ready(function()
    {
        //Irrelevant functions removed for clarity's sake
        GetNewPhotos();
    });
})();

function GetNewPhotos()
{
    $("#right-arrow").click(function(event) 
    {
        currentPhotoSet++
        if (currentPhotoSet <= maxPhotoSet)
        {
          // Load photos from cache
        }
        else
        {
            $.ajax({
                 type: "POST",
                 url: "/match/",
                 data: {"arrow" : "right", "currentPhotoSet" : currentPhotoSet},
                 dataType: "json",
                 success: function(jsonObject) 
                 { 
                    photoData[currentPhotoSet] = new Array();
                    photoData[currentPhotoSet] = jsonObject;
                 }
            });
        }
        SwapOnscreenPhotos(currentPhotoSet)
    });
}

function SwapOnscreenPhotos(currentPhotoSet)
{
    $("#photo-list img").each(function(index) 
    { 
        $(this).attr("src", photoData[currentPhotoSet][index+1]); 
    }); 
}

因此，在执行AJAX查询后，新的URL会出现在photoData中，但是当我们进入SwapOnscreenPhotos时，它们已经消失，添加的数组不再出现在photoData中。我认为这与此行photoData [currentPhotoSet] = new Array（）;

有关

在此范围内声明数组是否意味着当我离开此函数时它超出范围？这很奇怪，因为这些数据属于photoData全局变量。如果我确实需要在此函数之外声明新数组，那么我将如何在世界范围内执行此操作？我无法在编译时知道将调用多少次AJAX请求。

作为旁注，如果有人对我决定渲染HTML客户端而不是服务器端进行评论，我很乐意听到它。我正在讨论在JSON中仅返回所需的URL与发送包含图像的整个DOM元素然后缓存它们之间的争论。我知道javascript很慢，所以后一种选择可能会更好。

感谢您的帮助！

Javascript范围和新数组（）

0 个答案: