1

我知道我在我的 javascript 代码中违反了范围规则，而且我很确定我知道出了什么问题。我只是不明白导致我做错的规则或如何解决它。

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

这个缓存是在一个名为 photoData. photoData 是一个二维数组，其中包含出现特定照片的照片集（基本上是用户在到达该照片之前单击右箭头的次数）以及该集中出现的所有照片 URL。我遇到了一个问题，照片将在我的 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]); 
    }); 
}

所以新的 url 在执行 AJAX 查询后出现在 photoData 中，但是当我们到达 SwapOnscreenPhotos 时，它们已经消失了，添加的数组不再出现在 photoData 中。我认为这与这一行有关 photoData[currentPhotoSet] = new Array();

在这个范围内声明数组是否意味着当我离开这个函数时它会超出范围？这很奇怪，因为该数据属于 photoData 全局变量。如果我确实需要在这个函数之外声明新数组，我该怎么做呢？我无法在编译时知道 AJAX 请求将被调用多少次。

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

感谢您的帮助！

4

0 回答 0