在实现文档就绪功能时避免Javascript Function预期的错误

Question

I have a component on my page that needs to be hidden until the documented is ready. Therefore I have defined a couple of DIVs and implemented the document ready function:

<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>

Whilst this seems to work, it generates 'Function Expected' error in the browser's developer console. I've tried various different ways of expressing the function - see below. I've also tried replacing the function body with something simple like alert("me"). The error goes away if I remove the 'ready' function, but keep the document 'change' function. Therefore I'm now quite sure the problem lies in the 'ready' function definition.

Questions:

1. Why am I getting a Function expected error? The function seems to be properly formed and I'm setting properties rather using them as methods.
2. What is the correct convention for implementing a document ready function? Seemingly there are many approaches - eg $(document).on("ready", function () {...}; }). It would be great to agree on just one that works well and without error.

By the way, I'm using JQuery 2.2.0 with Bootstrap 3.3.6.

Answer 1

You forgot to add ; at the end of function. in both function.

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

Try replacing this code with your code...

Answer 2

Well spotted Gaurang! I need new spectacles ;-) The correct code is

<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>