Question

我们正在github建立战舰游戏。 Battleship

在这里，用户会看到他的船名和位置，根据答案，输出显示在一个名为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

将JS脚本标记放在body的末尾是个好习惯，这样就可以先加载所有HTML。
浏览器引擎按照它们在文档中出现的顺序加载HTML和JS，但最好取得该加载顺序的所有权。一个可能的事件顺序是：
- domsole.js已加载。
- battleship.js已加载。
- index.html文件准备活动。
- 游戏从这里开始。

在最后一步之前，不应该执行任何JS代码。因此，请确保在此之前未调用提示。

Answer 2

您似乎并不了解应用程序的执行流程。除非您再次调用未提及的init函数，否则在加载页面之前无法显示这些问题。在调用init方法之前，输出变量将是未定义的，因此如果在调用init之前调用ask，则会导致javascript错误。看来你错了＆＃34; loading＆＃34; for＆＃34;渲染＆＃34;。如果要确保在执行代码之前已完成页面呈现，则应使用大约50ms的超时来调用初始化函数。在事件处理完成之后，才会显示对jquery的就绪事件中触发的页面的任何修改。通过在ready事件处理程序中调用setTimeout函数，可以延迟处理，直到完成ready事件处理程序的呈现。

加载页面后，只显示javascript提示

2 个答案: