jQuery的未定义的全局变量

Question

我有以下内容：

    var ImageArray = [];
    var Images = $('#ImageSelection').children('img');

    var i = 0;

    Images.each(function() {
        var ImageSource = $(this).attr('src');
        var ImageTitle = $(this).attr('alt');
        var ImageHeight;
        getImageDimensions(ImageSource, function(data) {
            ImageHeight = data.height;
            alert(typeof ImageHeight + ' ' + ImageHeight);
        });
        alert(typeof ImageHeight + ' ' + ImageHeight);
        $(this).attr('id', i);
        ImageArray[i] = {
            'src': ImageSource,
            'title': ImageTitle,
            'height': ImageHeight,
            'id': i
        };
        i++;
    });

运行此代码后，未定义ImageArray[0].height ，但是回调函数中的警报显示的高度很好，而不在回调函数中的警报显示的则未定义。

getImageDimensions：

    function getImageDimensions(path, callback) {
        var img = new Image();
        img.onload = function() {
            callback({
                height: img.height
            });
        }
        img.src = path;
    }

Answer 1

代码var ImageArray = []; 不会使ImageArray全局化； 恰恰相反！ 由于您指定var ，因此该变量将在定义它的作用域内是局部的。

您可能将代码包装在$(document).load(function(){ ... }) ，以解释该行为。

解决方案：摆脱var并为任何{}之外的变量分配一个值：

 <script type="text/javascript">ImageArray = [];</script>

Answer 2

似乎是一个同步问题。 查询ImageHeight时，回调尚未设置。 您应该在回调函数中设置ImageArray [i]。

以下代码应该可以工作：

    var Images = $('#ImageSelection').children('img');
    var ImageArray = [];
    var i = 0;

    Images.each(function() {

        $(this).attr('id', i);

        getImageDimensions($(this), function(data) {
            var ImageHeight = data.height;
            alert(typeof ImageHeight + ' ' + ImageHeight);

            ImageArray[data.id] = {
                'src': data.src,
                'title': data.title,
                'height': data.height,
                'id': data.id
            };
        });

        i++;

    });

    function getImageDimensions($img, callback) {
        var img = new Image();
        img.onload = function() {
            callback({
                id: $img.attr('id'),
                height: img.height,
                src: $img.attr('src'),
                title: $img.attr('alt')
            })
        };
        img.src = $img.attr('src');
    };

Answer 3

这是一个异步问题。

尝试重现您的代码行为。 假设在Images数组中有一个图像。

1. 输入每个功能体
2. 调用getImageDimension（）
3. 在getImageDimension（）中，创建一个图像，并附加一个事件处理程序。 仅此而已：您的程序继续进行。
4. 在每个函数主体中，将维存储在ImageArray数组中。 目前，它仍未定义

在不久的将来，将调用图像的onload回调，并初始化变量。 但是为时已晚：您的每个功能都已经完成。

你需要：

1. 循环创建所有图像，并附加处理程序。
2. 等待所有处理程序都被触发（例如使用计数器）
3. 现在您的所有图像都已显示，您可以选择它们并获取其当前高度。

希望能帮助到你 ！

Answer 4

我已经完善了代码以跟踪图像加载并在准备好后调用processAfterLoading

var Images = $('#ImageSelection').children('img');
// new introduced Image-Load-Counter
var ImagesToLoad=Images.length;
var ImageArray = [];
var i = 0;

Images.each(function() {

    $(this).attr('id', i);

    getImageDimensions($(this), function(data) {
        var ImageHeight = data.height;
        alert(typeof ImageHeight + ' ' + ImageHeight);

        ImageArray[data.id] = {
            'src': data.src,
            'title': data.title,
            'height': data.height,
            'id': data.id
        };
        // Keep track of the amount of images to load before working with ImageArray
        ImagesToLoad--;
        if (ImagesToLoad<1) processAfterLoading()
    });

    i++;

});

function getImageDimensions($img, callback) {
    var img = new Image();
    img.onload = function() {
        callback({
            id: $img.attr('id'),
            height: img.height,
            src: $img.attr('src'),
            title: $img.attr('alt')
        })
    };
    img.src = $img.attr('src');
};

function processAfterLoading() {
    // Do ALL the things with ImageArray
}

Answer 5

尝试这个：

var ImageArray = [];
var Images = $('#ImageSelection').children('img');

var i = 0;

Images.each(function() {
    var ImageSource = $(this).attr('src');
    var ImageTitle = $(this).attr('alt');
    var ImageHeight;
    getImageDimensions(ImageSource, function(data) {
        ImageHeight = data.height;
         window.ImageArray[i] = {
        'src': ImageSource,
        'title': ImageTitle,
        'height': ImageHeight,
        'id': i
    };
    });

    $(this).attr('id', i);

    i++;
});