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 回答