Question

我在node.js中使用Electron框架来创建HTML5 Canvas游戏，我已将所有资源映射到Atlases（一个包含sprite的图像）。在游戏开始之前，我想将每个atlas.png加载到一个继续将所有地图集映射到一起的对象中，这样就可以更容易地使用canvas元素中的图像。

在Electron中执行此操作时，我unable 冻结 Electron BrowserWindow。这使我的应用程序/游戏只是继续代码，或者有时会停止。

this.addAtlas = function (name, root)
{
    // Creating the path for the Atlas
    var path = root + '/Assets/Atlases/' + name + '/' + name;


    // JSON File
    var jpath = path + '.json';

    // PNG File
    var ppath = path + '.png';

    // Checking if both png and json files exist
    if (!fs.existsSync(jpath) || !fs.existsSync(ppath) ) throw new Error('Atlas | "' + name + '" is not a valid Atlas (Misssing .json or/and .png file)');

    // Loading Atlas image syncrounously to Atlas.js
    var img = new Image(),
        isDone = false;

    // Initiating the Atlas
    img.onload = function () { isDone = true; };
    img.onerror = function () { throw new Error('Atlas | Atlas image failed to load!'); };
    img.src = ppath;

    // Stopping the browser to continue executing ANY scripts untill the image has finished loading.
    console.log('Started');

      ///////////////////////\\
     //    ATTENTION      //  \\
    ///////////////////////    \\
    // This is where my  \\    //
    // game is crashing   \\  //
    ///////////////////////////
    var count = 0;
    while (!isDone) {
        console.log(count);
        count++;
    }
    console.log('Finished');

    // Getting JSON file to an actual javascript object
    var obj = JSON.parse( fs.readFileSync(jpath).toString() );


    // Gathering all the information into an object
    var robj = {};

    robj.atlas = obj.Atlas;
    robj.image = img;
    robj.name = name;
    robj.id = this.atlasas_successully_loaded + 1;
    robj.path = path;

    // Injecting this.loaded with new Atlas
    this.loaded[robj.name] = robj;

    // Increasing the ID count
    this.atlases_successully_loaded++;
}

当这个while循环正在运行时，控制台中绝对没有计数，如果我去检查DOM Tree没有HTML，如果我去了源，那么什么也没有。那么如何冻结浏览器 UNTILL 图像/地图集已满载？

Answer 1

我猜你在这里需要旧的setInterval技巧。而不是有一个无限循环阻止执行堆栈继续你做这样的事情：

var interval;
interval = setInterval(function () {
    if (/*Some condition*/) {
        clearInterval(interval);
        nextFunction();
    }

}, 50) //check every 50 ms

用承诺来做这件事要好得多，但这需要更多的工作。

我认为这是一个有效的承诺解决方案，虽然我没有多研究你的代码，只是复制粘贴，并认为这是正确的想法。

this.addAtlas = function (name, root) {
    // Creating the path for the Atlas
    var path = root + '/Assets/Atlases/' + name + '/' + name;
     var that = this;

    // JSON File
    var jpath = path + '.json';

    // PNG File
    var ppath = path + '.png';

    // Checking if both png and json files exist
    if (!fs.existsSync(jpath) || !fs.existsSync(ppath) ) throw new Error('Atlas | "' + name + '" is not a valid Atlas (Misssing .json or/and .png file)');

    // Loading Atlas image syncrounously to Atlas.js

    var myPromise = function (resolve, reject) {
        var img = new Image(),
        isDone = false;

        // Initiating the Atlas
        img.onload = function () { resolve() };
        img.onerror = function () { reject('Atlas | Atlas image failed to load!'); };
        img.src = ppath;
    };

    // Stopping the browser to continue executing ANY scripts untill the image has finished loading.
    console.log('Started');

      ///////////////////////\\
     //    ATTENTION      //  \\
    ///////////////////////    \\
    // This is where my  \\    //
    // game is crashing   \\  //
    ///////////////////////////
    var count = 0;
    myPromise.then(function () {

        console.log('Finished');

        // Getting JSON file to an actual javascript object
        var obj = JSON.parse( fs.readFileSync(jpath).toString() );


        // Gathering all the information into an object
        var robj = {};

        robj.atlas = obj.Atlas;
        robj.image = img;
        robj.name = name;
        robj.id = this.atlasas_successully_loaded + 1;
        robj.path = path;

        // Injecting this.loaded with new Atlas
        that.loaded[robj.name] = robj;

        // Increasing the ID count
        that.atlases_successully_loaded++;
    });
};

通过冻结浏览器同步加载图像

1 个答案: