JavaScript - 在图像加载函数中设置对象的属性，在函数外部不设置一次属性

Question

有时 JavaScript 对我来说没有意义，请考虑以下代码，它基于 x/y 拼贴生成照片马赛克。下载每个马赛克图像后，我尝试将 .Done 属性设置为 true，但由于某种原因它始终为 false，我做错了什么？

var tileData = [];

function generate()
{
    var image = new Image();
    image.onload = function()
    {
        // Build up the 'tileData' array with tile objects from this Image

        for (var i = 0; i < tileData.length; i++)
        {
            var tile = tileData[i];

            var tileImage = new Image();
            tileImage.onload = function()
            {
                // Do something with this tile Image
                tile.Done = true;
            };
            tileImage.src = tile.ImageUrl;
        }
    };
    image.src = 'Penguins.jpg';

    tryDisplayMosaic();
}

function tryDisplayMosaic()
{
    setTimeout(function()
    {
        for (var i = 0; i < tileData.length; i++)
        {
            var tile = tileData[i];

            if (!tile.Done)
            {
                tryDisplayMosaic();
                return;
            }
        }

        // If we get here then all the tiles have been downloaded
        alert('All images downloaded');
    }, 2000);
}

现在由于某些原因，tile 对象上的 .Done 属性始终为 false，即使它在 tileImage.onload = 中明确设置为 true功能()。我可以向您保证这个函数确实会被调用，因为我在其中放置了一个 alert() 调用。现在它只是陷入无限循环中，不断调用 tryDisplayMosaic()。

此外，如果我在调用 tryDisplayMosaic() 之前放置一个循环，并在该循环中设置 .Done = true，然后 .Done 属性为真，alert('All images downloaded'); 将被调用。

Answer 1

顶部循环中的变量“tile”由您创建的每个“onload”函数共享；换句话说，完全相同的单个变量。试试这个，给每个人自己的变量:

tileImage.onload = (function(myTile) {
  return function()
        {
            // Do something with this tile Image
            myTile.Done = true;
        };
})(tile);

为什么会这样？因为与 C 或 Java 不同，像这样在循环内声明“tile”不会使其作用域限定为循环体的语句 block 。在 Javascript 中唯一给你作用域的是函数体。