简体   繁体   English

在jQuery就绪之前加载JavaScript?

[英]javascript loading before jQuery Ready?

JS newb here and was handed a project to take over. JS newb在这里,并交给了一个项目来接管。 I have a situation that I was able to get working (and took me forever to do so), but I don't understand the JS internals behind it. 我的情况是我能够上班(并且花了我一辈子的时间来做),但是我不了解它背后的JS内部原理。 Can someone shed light on this? 有人可以阐明这一点吗?

I have a JS file with two different type of function blocks inside of a js file that I'll call last.js b/c it is the last file listed: 我在js文件中有一个带有两种不同类型功能块的JS文件,我将其称为last.js b / c,它是列出的最后一个文件:

  1. Immediate function that is passed the jQuery object 传递给jQuery对象的立即函数
(function ($) {
...
}(jQuery));
  1. And right after that you have the standard jQuery doc load code: 之后,您便有了标准的jQuery doc加载代码:
$(function () {
...
});

This JS file is the last one referenced on my page and I assume it will be the last one called/loaded when the page executes. 该JS文件是我页面上引用的最后一个文件,我认为它将是页面执行时调用/加载的最后一个文件。 But that isn't quite the case. 但是事实并非如此。 The immediate function (1) is called first. 立即调用立即函数(1)。 Next, there jqueryvalidation.js file is loaded and executed. 接下来,将加载并执行jqueryvalidation.js文件。 Finally, the jQuery ready() function in last.js is called. 最后,调用last.js中的jQuery ready()函数。

So this effectively runs the immediate function before my other js libraries, then it loads/runs the other js files in order and lastly it comes back to my last.js file and finishes it. 因此,这可以在我的其他js库之前有效地运行即时函数,然后依次加载/运行其他js文件,最后返回到我的last.js文件并完成它。 How can the last file in the list be called before my jqueryvalidation.js file? 如何在我的jqueryvalidation.js文件之前调用列表中的最后一个文件? And the immediate function is passed jQuery, so jQuery would have had to already be loaded and the page should be ready at that time. 并且立即函数是通过jQuery传递的,因此jQuery必须已经加载,并且页面应该在那时准备就绪。

For me to use jqueryvalidation.js I have to put my custom validation code in the immediate window. 对于我来说,使用jqueryvalidation.js必须将自定义验证代码放在立即窗口中。 If I put it in the jQuery ready function it gets called after the validation code has parsed the page and doesn't do anything. 如果我将其放在jQuery ready函数中,则它将在验证代码已解析页面并且不执行任何操作后调用它。

Why would these two functions that are in the same js file have a completely different order of execution? 为什么同一js文件中的这两个函数的执行顺序会完全不同?

$(function(){}) is shorthand for $(document).ready(function(){}) , which it means it's not executed until the document is loaded. $(function(){})$(document).ready(function(){})简写,这意味着它只有在加载文档后才会执行。

So, what's happening here is your code is running and when it hits $(function(){}) , it adds a function to the event queue, then the rest of the code runs. 因此,这里正在发生的事情是您的代码正在运行,当它到达$(function(){}) ,它将向事件队列添加一个函数,然后其余代码运行。

It then goes onto the next <script> tag and so on until it's parsed the page. 然后将其转到下一个<script>标记,依此类推,直到解析了页面为止。 Once the DOM is ready, then your function runs. DOM准备就绪后,您的函数将运行。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM