你能有多个 $(document).ready(function() ... );部分？

Posted 2023-05-08

【中文标题】你能有多个 $(document).ready(function() ... );部分？

【英文标题】：Can you have multiple $(document).ready(function() ... ); sections?你能有多个 $(document).ready(function() ... );部分？

【发布时间】：2010-11-22 14:26:03

【问题描述】：

如果我在启动时有很多功能，它们是否都必须在一个单一的之下：

$(document).ready(function() 

或者我可以有多个这样的陈述吗？

【问题讨论】：

主要在我需要加载多个 js 文件时需要，每个文件都包含 $(document).ready();功能

@leora 这个问题是在一次采访中被问到的：D 谢谢

【参考方案1】：

你可以有多个，但这并不总是最整洁的事情。尽量不要过度使用它们，因为它会严重影响可读性。除此之外，这是完全合法的。见下文：

http://www.learningjquery.com/2006/09/multiple-document-ready

试试这个：

$(document).ready(function() 
    alert('Hello Tom!');
);

$(document).ready(function() 
    alert('Hello Jeff!');
);

$(document).ready(function() 
    alert('Hello Dexter!');
);

你会发现和这个是等价的，注意执行顺序：

$(document).ready(function() 
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
);

另外值得注意的是，在一个 $(document).ready 块中定义的函数不能从另一个 $(document).ready 块中调用，我刚刚运行了这个测试：

$(document).ready(function() 
    alert('hello1');
    function saySomething() 
        alert('something');
    
    saySomething();

);
$(document).ready(function() 
    alert('hello2');
    saySomething();
); 

输出是：

hello1
something
hello2

【讨论】：

在使用多个 $(document).ready() 语句时依赖执行顺序是不明智的。每一个都需要独立于任何其他已经被执行或没有被执行。

@AoP - 我不知道这有多大意义，如果它们没有按顺序执行，那么它们在应用程序的上下文中完全没有意义，所以使用多个 $(document).准备好（块将被完全破坏。

@karim79 当然，这（OP的问题）在编写具有多个启动问题的复杂代码时最适用 - 即加载完成时总是运行的一些代码，还有一些只在某些内容节点上需要？在这种情况下，上下文应该是孤立的，执行顺序应该是无关紧要的——能够分配给“DOM 就绪”事件而不覆盖前一个事件成为一个有用的特性，而不管排序行为如何。跨度>

关于在一个就绪块中定义的函数不能从另一个就绪块调用 - 这是您定义函数的方式，但如果您将其定义为 saySomething = function() 那么你可以打电话给它。很奇怪，对吧？ jsfiddle.net/f56qsogm 在这里测试一下。

我认为它的行为是这样的，因为它将函数添加到全局可访问的窗口对象中。否则，它是一个声明性函数，范围仅限于该就绪函数。

【参考方案2】：

您可以使用多个。但是你也可以在一个 document.ready 中使用多个函数：

$(document).ready(function() 
    // Jquery
    $('.hide').hide();
    $('.test').each(function() 
       $(this).fadeIn();
    );

    // Reqular JS
    function test(word) 
       alert(word);
    
    test('hello!');
);

【讨论】：

如果您可以完全控制附加到页面的代码，则可以。如果有人已经在附加到页面的另一个文件中写了这个，那么你可以这样声明它。

不确定你想说什么。但是如果你把它放在你的脑海中，并包含 15 个其他外部 JS，所有这些都包含一个（或多个 document.load），它仍然会像只有一个一样工作。值得一提的是，每个函数/变量的独家新闻都以 $(document).ready-function 的右括号结束。

只是想说有时候，其他人会编写附加到页面的模块，这些模块已经声明了文档就绪函数，因此您可能没有将所有代码移动到一个函数中的奢侈（当然，这将是理想的）。不过，我也会警惕这里有太多东西，因为我们会得到 On Ready Bloating，这会使代码同样难以维护。

啊，现在我明白了。是的，我同意这一点。刚刚举了一个例子来证明它是可能的；）

【参考方案3】：

是的，您可以轻松拥有多个块。请注意它们之间的依赖关系，因为评估顺序可能不是您所期望的。

【参考方案4】：

是可以有多个 $(document).ready() 调用。但是，我认为您无法知道它们将以哪种方式执行。 (source)

【讨论】：

谢谢，把这一点说清楚是很好的，因为——尽管在这个主题上普遍存在智慧——jQuery ready() page 实际上并没有说你是否可以（在撰写本文时： ））。但是它确实有点暗示没关系，如果你在一句话的两行之间阅读：Ready handlers bound this way are executed after any bound by the other three methods above.

【参考方案5】：

是的，这是可能的，但您可以更好地使用 div #mydiv 并同时使用两者

$(document).ready(function());

//and

$("#mydiv").ready(function());

【讨论】：

有趣的想法，但为什么它更好？

不支持使用 div。如果出于某种原因您这样做，您将自行承担风险：The .ready() method can only be called on a jQuery object matching the current document

【参考方案6】：

是的，你可以。

如果您有其他模块在使用它的同一页面外，则多个文档就绪部分特别有用。使用旧的window.onload=func 声明，每次指定要调用的函数时，它都会替换旧的。

现在指定的所有函数都已排队/堆叠（有人可以确认吗？），无论它们在哪个文档就绪部分中指定。

【讨论】：

是的，确实如此，与替换以前的 $(document).ready 函数相比，函数排队的速度更高。

【参考方案7】：

是的，这完全没问题。但请避免无缘无故地这样做。例如，当我的 javascript 文件是动态生成的时，我使用它来单独声明全局站点规则，而不是单独的页面，但如果你只是一遍又一遍地这样做，它就会变得难以阅读。

您也不能从另一个访问某些方法 jQuery(function());打电话 所以这是你不想这样做的另一个原因。

使用旧的window.onload，但每次指定函数时都会替换旧的。

【参考方案8】：

我认为更好的方法是切换到命名函数(Check this overflow for more on that subject)。 这样您就可以从单个事件中调用它们。

像这样：

function firstFunction() 
    console.log("first");


function secondFunction() 
    console.log("second");



function thirdFunction() 
    console.log("third");

这样你就可以在一个准备好的函数中加载它们。

jQuery(document).on('ready', function()
   firstFunction();
   secondFunction();
   thirdFunction();

);

这会将以下内容输出到您的 console.log：

first
second
third

这样您就可以将函数重用于其他事件。

jQuery(window).on('resize',function()
    secondFunction();
);

Check this fiddle for working version

【参考方案9】：

这是合法的，但有时会导致不良行为。作为示例，我使用了 MagicSuggest 库并在我的项目页面中添加了两个 MagicSuggest 输入，并为每个输入初始化使用了单独的文档就绪函数。第一个输入初始化工作，但不是第二个，也没有给出任何错误，第二个输入没有出现。所以，我总是推荐使用一个 Document Ready 功能。

【参考方案10】：

您甚至可以在包含的 html 文件中嵌套文档就绪函数。这是一个使用 jquery 的示例：

文件：test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
     );
</script>

</body>
</html>

文件：test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    
        console.log( 'test_embed.html READY' );
     );
</script>

控制台输出：

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

浏览器显示：

test_embed.html

【参考方案11】：

你也可以这样做：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function()
     $("#hide").click(function()
     $("#test").hide();
     );
     $("#show").click(function()
     $("#test").show();
     );
 );
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

之前的答案显示在单个 .ready 块中使用多个命名函数，或在 .ready 块中使用单个未命名函数，在 .ready 块之外使用另一个命名函数。我在研究是否有办法在 .ready 块中包含多个未命名的函数时发现了这个问题 - 我无法获得正确的语法。我终于想通了，并希望通过发布我的测试代码来帮助其他人寻找我遇到的相同问题的答案

【讨论】：

您能描述一下这与其他答案有何不同吗？

当然：前面的答案显示在单个 .ready 块中使用多个命名函数，或在 .ready 块中使用单个未命名函数，在 .ready 块之外使用另一个命名函数。我在研究是否有办法在 .ready 块中包含多个未命名的函数时发现了这个问题 - 我无法获得正确的语法。我终于想通了，并希望通过发布我的测试代码来帮助其他人寻找我遇到的相同问题的答案。

对不起，我的意思是在问题中。文本框左下方有一个编辑按钮。描述为什么您的解决方案不同/更好，这会使其成为更好的答案，因为未来的读者可以更快地理解“为什么”。谢谢。