Question

我有一些看起来像这样的代码：

createEntity = function (imageSource, baseX, baseY) {
    tmpIndex = images.length;
    images[tmpIndex] = new Image();
    entities[tmpIndex] = new Entity;
    images[tmpIndex].onload = function () {
        entities[tmpIndex].ready = true;

        // How do I get the line above to use the value of tmpIndex
        //  that existed when it was created?
        // That is to say, I want the images[1].onload function to
        //  change entities[1].ready, not entities[4].ready
        //  (assuming I created 5 objects sequentially
        //   before any images finished loading)

    }
    images[tmpIndex].src = imageSource;
    entities[tmpIndex].x = baseX;
    entities[tmpIndex].y = baseY;
}

createEntity("images/background.png", 0, 0);
createEntity("images/pawn1.png",0,0);
createEntity("images/pawn2.png",30,30);
createEntity("images/pawn3.png",60,60);
createEntity("images/pawn4.png",90,90);

问题在于，当我按顺序加载所有5个图像时，如上面的代码所示，我的onload函数使用tmpIndex的当前值触发，而不是创建函数时存在的值。是否有一种简单的方法可以使实体[somenumber] .ready正确切换？

Answer 1

您需要将tmpIndex声明为局部变量。要做这个改变

tmpIndex = images.length;

到

var tmpIndex = images.length;

Answer 2

为什么tmpIndex必须在createEntity函数之外可见？如果它没有，只需在你的函数中声明它，如下所示：var tmpIndex = images.length;

即使onload函数执行完毕，您的createEntity回调也能读取其值，因为它会保留对创建它的范围的引用。

每个执行范围都不同，因此每次调用createEntity时都会创建不同的范围和不同的onload回调函数，该函数存储对执行范围的引用，因此能够消耗那里定义的变量。

Answer 3

完全。这是一个有效的JSfiddle示例，它在onload上捕获onerror：http://jsfiddle.net/bdn2775k/1/

这是重要部分：

//Don't forget to declare a local variable !
var tmpIndex = images.length;

javascript：在调用之间保存变量的值？

3 个答案: