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

Question

我正在尝试用 Javascript 和 HTML 制作简单的游戏，所以我需要图像函数来加载精灵。我希望它等到加载图像然后继续处理另一个图像。不幸的是，我编写的代码使我的浏览器无法工作。我认为应该完成的是无限的while循环。

这是我的代码：

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，介绍如何加载多个图像并在完成后继续。