javascript - 在实现文档就绪功能时避免 Javascript 函数预期错误

Question

我的页面上有一个组件需要隐藏，直到文档准备好为止。因此，我定义了几个 DIV 并实现了文档就绪功能:

<div id="LoadingDiv" style="display:block;text-align:center">
    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
<div class="form-horizontal" id="LoadedDiv" style="display:none;">
   ...
</div>

<script  type="text/javascript"> 

$(document).ready(function () {
    setTimeout(function () {
        document.getElementById("LoadingDiv").style.display = "none";
        document.getElementById("LoadedDiv").style.display = "block";
    }, 500);
})

$(document).on("change", function () {
        window.onbeforeunload = function () {
            return "your changes to this form have not been saved";
        };
})
</script>

虽然这似乎有效，但它会在浏览器的开发人员控制台中生成“预期功能”错误。我尝试了各种不同的方式来表达该函数 - 见下文。我还尝试用像alert(“me”)这样简单的东西替换函数体。如果我删除“准备”功能，但保留文档“更改”功能，该错误就会消失。因此，我现在非常确定问题出在“就绪”函数定义上。

问题:

1. 为什么我会收到函数预期错误？该函数似乎格式正确，我正在设置属性而不是将它们用作方法。
2. 实现文档就绪功能的正确约定是什么？似乎有很多方法 - 例如$(document).on("ready", function () {...}; }).如果能就一个运行良好且没有错误的方案达成一致，那就太好了。

顺便说一句，我正在使用 JQuery 2.2.0 和 Bootstrap 3.3.6。

Answer 1

您忘记添加；在函数结束时。在这两个函数中。

$(document).ready(function () {
setTimeout(function () {
    document.getElementById("LoadingDiv").style.display = "none";
    document.getElementById("LoadedDiv").style.display = "block";
}, 500); 
}); //added ; at the end of function.

尝试用您的代码替换此代码...