2

我了解 jQuery，我只是想问一下，这两个代码示例之间有什么区别（我知道，它会做同样的事情，但我很好奇，如果第二个示例有特定的内容。

示例 1：

$(document).ready(function() {
    // some code #1
    // some code #2
    // some code #3
});

这里是一个地方的所有 JS。

示例 2：

$(document).ready(function() {
    // some code #1
});

$(document).ready(function() {
    // some code #2
});

$(document).ready(function() {
    // some code #3
});

这些函数（DOM 就绪）被放置在不同的 JS 文件中。

我只是在想，它将如何处理，但我猜它会在加载 DOM 之后执行，然后按顺序，如何在 HTML 中调用它。

4

4 回答 4

5

传递给的每个单独的函数$(document).ready()将为变量和函数创建自己的范围，这可能会导致相当大的差异。举两个例子：

$(document).ready(function() {
    function viewEvent(event) {
        console.log(event);
        return false;
    }

    $('a').on('click', viewEvent);
    // works fine, clicking on an <a> element will log the event object
});

然后：

$(document).ready(function() {
    function viewEvent(event) {
        console.log(event);
        return false;
    }
});


$(document).ready(function() {
    $('a').on('click', viewEvent);
    // won't work, viewEvent is out of scope here
});
于 2013-11-15T10:56:11.947 回答
3

您可以拥有任意数量的它们，它们将按照$()or$(document).ready()函数的执行顺序执行。（即每个处理程序都添加到队列中）。

于 2013-11-15T10:54:29.673 回答
3

多个文档就绪处理程序都将按照它们绑定的顺序调用。一般来说，我建议只使用一个来保持整洁，除了...

“这些功能（DOM 就绪）位于不同的 JS 文件中。”

这是我能想到的拥有多个就绪处理程序的最佳理由。

“我只是在想，它会如何处理，但我猜它会在加载 DOM 之后执行，然后按顺序，在 HTML 中如何调用它。”

那是对的。

于 2013-11-15T10:50:51.927 回答
2

我猜它会在加载 DOM 之后执行，然后按顺序执行，它是如何在 HTML 中调用的。

这是正确的。

这些函数将按照它们附加到 DOM 就绪事件的顺序堆叠和线性调用。

于 2013-11-15T10:51:29.200 回答