Fatal编程技术网
  • jquery/
  • Jquery 可以有多个$（document）.ready（function（）{…}）；部分？

Jquery 可以有多个$（document）.ready（function（）{…}）；部分？

jquery

Jquery 可以有多个$（document）.ready（function（）{…}）；部分？,jquery,Jquery,如果我在启动时有很多函数，它们是否都必须在一个单独的函数下： $(document).ready(function() { 或者我可以有多个这样的陈述吗？你可以有多个这样的陈述，但这并不总是最整洁的事情。尽量不要过度使用，因为这会严重影响可读性。除此之外，这是完全合法的。见下文： 试试这个： $(document).ready(function() { alert('Hello Tom!'); }); $(document).ready(function() { alert

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

$(document).ready(function() {
或者我可以有多个这样的陈述吗？

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

试试这个：

$(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!');
});
还值得注意的是，在一个
$（文档）中定义的函数。不能从另一个
$（文档）调用ready
块。ready
块，我刚刚运行了此测试：

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

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
});
产出为：

hello1
something
hello2
是可以有多个$（document）.ready（）调用。然而，我认为你不知道他们将以何种方式被处决

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

您可以使用多个。但您也可以在一个文档中使用多个函数。准备就绪：

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

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});
是的，你可以

如果有其他模块使用同一页面，那么多个文档就绪部分尤其有用。使用旧的
窗口.onload=func
声明，每次指定要调用的函数时，它都会替换旧的

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

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

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

//and

$("#mydiv").ready(function(){});
是的，这很好。但是避免无缘无故地这样做。例如，当动态生成javascript文件时，我使用它来声明全局站点规则，而不是单独声明独立页面，但如果您不断重复，它将很难读取

此外，您无法从其他方法访问某些方法 
jQuery（函数（）{}）呼叫
这就是你不想这么做的另一个原因


使用旧的
窗口。onload
，尽管每次指定函数时都会替换旧窗口。
我认为更好的方法是将开关切换到命名函数。

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


这样，您就可以从单个事件调用它们

像这样：


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();
});





这是合法的，但有时会导致不受欢迎的行为。例如，我使用MagicSuggest库，在我的项目的一个页面中添加了两个MagicSuggest输入，并为每个输入的初始化使用单独的文档就绪函数。第一次输入初始化工作正常，但第二次没有，也没有给出任何错误，第二次输入没有出现。因此，我始终建议使用一个文档就绪函数
 您甚至可以在包含的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>



<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
您也可以通过以下方式执行此操作：


<!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>



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



<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（函数（）{
$（“#隐藏”）。单击（函数（）{
$（“#测试”）.hide（）；
});
$（“#显示”）。单击（函数（）{
$（“#测试”）.show（）；
});
});
这是对jQuery的测试！

这是一个隐藏的段落

单击我隐藏
单击我来显示





前面的回答显示了在单个.ready块中使用多个命名函数，或者在.ready块中使用单个未命名函数，在.ready块之外使用另一个命名函数。我在研究是否有办法在.ready块中包含多个未命名函数时发现了这个问题-我无法获得正确的语法。我终于找到了答案，并希望通过发布我的测试代码，我能帮助其他人找到我遇到的同一个问题的答案
如果你完全控制了附在页面上的代码，这是可以的。如果有人已经在附加到页面的另一个文件中写入了此内容，那么您可以这样声明。不确定您想说什么。但是如果你把它放在你的脑子里，并包括15个其他的外部JS，所有这些都包含一个（或多个document.load），它仍然会像只有一个一样工作。值得一提的是，每个函数/变量的独家新闻都以$（document）.ready-function的右括号结尾。我只是想说，有时候，其他人会在页面上附加已声明document-ready函数的已编写模块，因此您可能无法将所有代码移动到一个函数中（当然，这很理想）。不过，我也会小心这里的东西太多，因为我们会准备膨胀，这会使代码同样难以维护。啊，现在我明白了。是的，我同意这一点。只是举了一个例子来证明这是可能的；）是的，这是真的，函数的排队率比以前的要高$（document）.ready函数。使用多个$（document）.ready（）时，依赖执行顺序是不明智的语句。每一个语句都需要独立于已执行或未执行的任何其他语句执行。@AoP-我不知道这有多大意义，如果它们没有按顺序执行，那么它们在应用程序上下文中完全没有意义，因此使用多个$（document）。准备好了吗（区块将被完全打破。@karim79肯定这是（OP的问题）在编写具有多个启动关注点的复杂代码时最适用，即某些代码在加载完成时始终运行，而某些代码仅在某些内容节点上需要？在这种情况下，上下文应该是孤立的，执行顺序应该是无关紧要的-能够分配给“DOM就绪”事件在不覆盖上一个的情况下，它将成为一个usefu