当在一个页面中引用多个 JavaScript 文件并且每个文件都有自己的 $(document).ready() 调用时，会发生以下情况：
加载顺序：JavaScript 文件是按照它们在 HTML 文件中被加载的顺序来执行的。如果某个文件中的
$(document).ready()在另一个文件里面的调用之前执行，那么它将先于第二个文件执行。执行顺序：每个文件中的
$(document).ready()只会执行一次，并且会在页面的 DOM 加载完成后立即执行。如果有多个$(document).ready()函数，它们将按照它们出现的顺序执行。
考虑下面的例子：
--------- -----
------
------
------------- ------- ---------------
------- ------------------------
------- -------------------------
-------
------
--------- ----------
-------
-------其中，first.js 的内容为：
---------------------------- - ------------------ ---- -- -------- ---
而 second.js 的内容为：
---------------------------- - ------------------- ---- -- -------- ---
在这个例子中，如果 first.js 先于 second.js 被加载，那么页面的控制台将按照以下顺序输出：
----- ---- -- ----- ------ ---- -- -----
这是因为第一个 $(document).ready() 函数先于第二个函数执行。
如果你需要确保某些代码在所有 JavaScript 文件都已加载完毕并且 DOM 已经准备好之后才执行，可以使用 jQuery 的 $.when() 函数和 Deferred 对象。下面是一个例子：
------- ------------------------ ------------------------ ----------------- - ---------------- ----- --- -------- ---
这段代码使用了 $.getScript() 函数来异步加载 JavaScript 文件，并使用 $.when() 函数等待所有文件加载完成后执行回调函数。当所有文件都被加载并且 $(document).ready() 函数被执行时，控制台将输出 "All files are ready"。
在编写复杂的前端代码时，确保正确地管理 JavaScript 文件和它们的 $(document).ready() 调用非常重要。尝试使用模块化的 JavaScript 架构（如 RequireJS 或 ES6 模块），以便更好地管理文件和代码依赖关系。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27455