当在同一个 HTML 页面中使用两个 JavaScript 文件，每个文件都有 jQuery `$(document).ready` 调用时会发生什么？

当在一个页面中引用多个 JavaScript 文件并且每个文件都有自己的 $(document).ready() 调用时，会发生以下情况：

1. 加载顺序：JavaScript 文件是按照它们在 HTML 文件中被加载的顺序来执行的。如果某个文件中的 $(document).ready() 在另一个文件里面的调用之前执行，那么它将先于第二个文件执行。

2. 执行顺序：每个文件中的 $(document).ready() 只会执行一次，并且会在页面的 DOM 加载完成后立即执行。如果有多个 $(document).ready() 函数，它们将按照它们出现的顺序执行。

考虑下面的例子：

-- -------------------- ---- -------
--------- -----
------
  ------
    ------------- ------- ---------------
    ------- ------------------------
    ------- -------------------------
  -------
  ------
    --------- ----------
  -------
-------

其中，first.js 的内容为：

$(document).ready(function() {
  console.log("First file is ready");
});

而 second.js 的内容为：

$(document).ready(function() {
  console.log("Second file is ready");
});

在这个例子中，如果 first.js 先于 second.js 被加载，那么页面的控制台将按照以下顺序输出：

First file is ready
Second file is ready

这是因为第一个 $(document).ready() 函数先于第二个函数执行。

如果你需要确保某些代码在所有 JavaScript 文件都已加载完毕并且 DOM 已经准备好之后才执行，可以使用 jQuery 的 $.when() 函数和 Deferred 对象。下面是一个例子：

$.when(
  $.getScript("first.js"),
  $.getScript("second.js")
).then(function() {
  console.log("All files are ready");
});

这段代码使用了 $.getScript() 函数来异步加载 JavaScript 文件，并使用 $.when() 函数等待所有文件加载完成后执行回调函数。当所有文件都被加载并且 $(document).ready() 函数被执行时，控制台将输出 "All files are ready"。

在编写复杂的前端代码时，确保正确地管理 JavaScript 文件和它们的 $(document).ready() 调用非常重要。尝试使用模块化的 JavaScript 架构（如 RequireJS 或 ES6 模块），以便更好地管理文件和代码依赖关系。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27455