ページがロードされた後にのみjavascriptプロンプトが表示されます

Question

私たちはgithubで戦艦ゲームを構築しています。

ここで、ユーザーは船の名前と位置を入力し、答えに基づいて、domsoleというテキストエリアに出力を表示します。

Domsole = (function($) { 
var output; 

var init = function(outname) { 
    output = $('#'+outname); 
    output.attr('disabled', 'disabled'); 
}; 

var ask = function(question) { 
    write(question); 
    var text = prompt(question); 
    write('> ' + text); 
    return text; 
}; 

var write = function(text) { 
    output.append(text + "\n"); 
    output.scrollTop(9999999999); 
}; 

return { 
    ask: ask, 
    init: init, 
    write: write 
}; 
})(jQuery); 

$(document).ready(function() { 
    Domsole.init('domsole_out'); 
}); 

ただし、ページが読み込まれる前にすべてのプロンプトが表示されます。

プロンプトの一部は

this.name = Domsole.ask("What's your name, Playa?"); 

    Domsole.write("Alright, " + this.name + " you shall be."); 
........ 
...... 
     var coord = Domsole.ask("Where would you like to take a shot? Valid input is: x, y"); 

Domsole.writeとDomsole.askがdocument.readyでもある呼び出すこれらのコードをしています。 何かが画面に表示される前に、すべてのプロンプトが表示されますか？この問題を解決するには？

Answer 1

• 最初にすべてのあなたのHTMLロードするようにそれは、bodyの終わりに、あなたのJSのスクリプトタグを置くのは良い習慣です。
• ブラウザエンジンは、ドキュメントに表示されている順序でHTMLとJSをロードしますが、そのロードオーダーの所有権を取得することをお勧めします。 1つの可能なイベントの順番は：
  • domsole.jsです。
  • battleship.jsがロードされています。
  • index.html準備完了イベント。
  • ゲームはここから始まります。

ませんJSコードは、その最後のステップの前に実行している必要があります。プロンプトがその時点より前に呼び出されていないことを確認してください。

Answer 2

アプリケーションの実行フローがわからないようです。あなたが言及していないinit関数をもう一度呼び出さない限り、ページがロードされる前にこれらの質問が表示される可能性はありません。出力変数はinitメソッドが呼び出されるまで未定義になり、initが呼び出される前にaskが呼び出された場合にjavascriptエラーが発生します。 「レンダリング」に「読み込み中」と間違っているようです。コードの実行前にページのレンダリングが完了したことを確認したい場合は、初期化関数を呼び出すために約50msのタイムアウトを使用する必要があります。 jqueryのreadyイベントでトリガされたページの変更は、イベント処理が完了するまで表示されません。 readyイベントハンドラ内でsetTimeout関数を呼び出すと、readyイベントハンドラのレンダリングが完了するまで処理を遅らせることができます。