ブラウザをフリーズして画像を同期読み込みする

Question

node.jsのElectronフレームワークを使用してHTML5 Canvasゲームを作成しています。すべてのリソースをAtlases（スプライトを含む1つの画像）にマップしました。ゲームを開始する前に、すべてのアトラスをマップし続けているオブジェクトにすべてのatlas.pngをロードして、キャンバス要素の画像を使用する方が簡単です。

電子Iでこれを行っている間、フリーズElectron BrowserWindowはunableからであった。これにより、私のアプリケーション/ゲームは単にコードを続行するか、時には停止することになります。私はソースに行けば

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ループは私はHTMLがないDOM Treeを見に行く場合は、コンソールには、カウントは、絶対にありません実行している間は、何もありません。では、ブラウザをフリーズするにはどうすればいいですか？UNTILL image/atlasが完全にロードされていますか？

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++; 
    }); 
};