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>

虽然这似乎有效，但它会产生“预期的功能”。浏览器的开发者控制台中出错。我已尝试过各种不同的表达方式 - 见下文。我也试过用一些像警报这样简单的东西来替换功能体（＆＃34; me＆＃34;）。如果我删除准备好的＆＃39;该错误就会消失。功能，但保持文件“改变”＃39;功能。因此，我现在非常确定问题出在“准备好了”的问题上。功能定义。

问题：

为什么我收到函数预期错误？该函数似乎已正确形成，我设置属性而不是将它们用作方法。
实现文档就绪功能的正确惯例是什么？看似有很多方法 - 例如$（document）.on（＆＃34; ready＆＃34;，function（）{...};}）。能够很好地同意一个运行良好而且没有错误的人会很高兴。

顺便说一下，我使用带有Bootstrap 3.3.6的JQuery 2.2.0。

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.

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

Answer 2

好好发现了Gaurang！我需要新的眼镜;-)正确的代码是

<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);
}); 
</script>

避免Javascript函数实现文档就绪函数的预期错误

问题：

2 个答案: