Question

我试图用Javascript和HTML制作简单的游戏，所以我需要图像功能来加载精灵。我希望它等到图像加载然后再进入另一个图像。我编写的不幸代码阻止了我的浏览器工作。我认为应该完成的循环是无止境的。

这是我的代码：

var Sprites = {};
function NewSprite( Name, URL )
{
    Sprites[ Name ] = new Image( );
    Sprites[ Name ].Ready = false;
    Sprites[ Name ].onload = function ( )
    {
        this.Ready = true;
    }
    Sprites[ Name ].src = URL;

    while ( Sprites[ Name ].Ready === false );
}

当我在最后没有while循环的情况下运行它并检查Sprites[ Name ].Ready值时，它会给我true所以我认为它应该有用。

我正在调用我的函数：

NewSprite( "img", "http://lorempixel.com/output/abstract-q-g-100-100-6.jpg" );

感谢您的帮助！

Answer 1

JavaScript是单线程的，这意味着它只能在任何时候执行代码的一部分。

这一行：

while ( Sprites[ Name ].Ready === false );

将阻止浏览器执行任何其他操作，包括设置Ready状态，这意味着循环将永远继续并最终在浏览器中触发脚本阻止。事件是异步，但不能与多线程混淆（这是另一回事）。

您需要一种不同的方法来解决这个问题

var Sprites = {};
function NewSprite( Name, URL, callback ) {
    Sprites[ Name ] = new Image( );
    Sprites[ Name ].Ready = false;
    Sprites[ Name ].onload = function ( ) {
        this.Ready = true;
        // continue from here
        callback(this);       // use a callback
    }
    Sprites[ Name ].src = URL;

    //while ( Sprites[ Name ].Ready === false );  Will block browser...!
}

现在你可以这样使用代码：

NewSprite("img", url, function(image) {
    // continue from here...
});

尽管如此，SO已经多次回答过这个问题。关于如何加载多个图像并在完成后继续， one example 就是

。

Javascript图像加载功能挂断了我的浏览器

1 个答案: