仅在页面加载后显示javascript提示[重复]答案

【问题标题】：Have javascript prompt only display after page is loaded [duplicate]仅在页面加载后显示javascript提示[重复]
【发布时间】：2016-11-29 03:56:31
【问题描述】：

我们正在 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 中。在屏幕上显示任何内容之前，这里会询问所有提示？如何解决这个问题？

【问题讨论】：

那么你是说你提供的调用 ask/write 方法的第二个代码片段没有在文档中准备好？ @paris_serviola
调用ask/write方法的代码也在文档里面
使用 window.onload。查看这个问题的答案stackoverflow.com/questions/21742867/…

标签： javascript

【解决方案1】：

将你的JS脚本标签放在body的末尾是一个好习惯，这样你所有的HTML都会先加载。
浏览器引擎按照它们在文档中出现的顺序加载 HTML 和 JS，但最好掌握该加载顺序。一种可能的事件顺序是：
- domsole.js 已加载。
- battleship.js 已加载。
- index.html 文档就绪事件。
- 游戏从这里开始。

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

【讨论】：

控制脚本加载顺序的唯一方法是逐字添加脚本标签，然后可能以预定义的顺序从 javascript 中删除它们。 HTTP 2.0 允许同时加载多个文档，这意味着这个“技巧”不能保证在未来的浏览器中有效。

【解决方案2】：

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

【讨论】：