jQuery里的$(function())为什么会改变执行顺序？

Question

网页代码块如下：...<script src="./js/main.js"></script><script>     try {      window.RenderModel = {{ data|safe }};     } catch (e) {     }</script>...后面这段内嵌代码是在页面加载是由后端(django)补全，传进来一些重要的参数。然后，我的main.js里有这样一个变量：var hasServer = typeof (window.RenderModel) !== 'undefined'这个变量通过判断window.RenderModel是否存在来检测当前是否有服务器环境。现在有一个小问题，虽然说可以解决，但是不明白其中的原理，所以请教一下各位高手。当hasServer这个变量在main.js里直接声明时，无论是否在服务器环境，window.RenderModel都被检测为undefined，因为main.js在内嵌代码前面执行，这一点是很显然的。但是，如果我将hasServer的声明放置在一个$(function())中，如这样：$(function() {    var hasServer = typeof (window.RenderModel) !== 'undefined'     ... });这个时候hasServer就可以正常判断`window.RenderModel了，产生这种区别的原因是什么？

Answer 1

$(function() {
    doOtherThings();
});
doSomething();

这段代码，你也许是觉得 doOtherThings() 会先执行，但实际是 doSomthing() 先执行。因为 $() 实际是 $(document).ready() 的简写，也就是说 $() 中的 function 是 document.ready 事件的回调函数。它要在 document 准备好了（加载完了）才执行。

很显示，在到达当前 HTML 最后一句之前，文档都还没准备好，而写在 $() 外面的代码，是遇到即执行。所以 doOtherThings() 是在执行 doSomehting() 之前注册到 ready 事件中，但执行却在 doSomething() 之后。