究竟何时执行$(document).ready回调? [英] When exactly the $(document).ready callback is executed?
问题描述
假设我们将 .click() 处理程序附加到锚定(<a>)标签中 $(document).ready 回调.此处理程序将取消默认操作(在href之后)并显示警报.
Suppose that we attach a .click() handler to an anchor (<a>) tag in the $(document).ready callback. This handler will cancel the default action (following the href) and show an alert.
我想知道的是何时确切执行回调，用户是否可以单击锚点(该文档已在浏览器中显示)，但该事件尚未附加.
What I would like to know is when exactly the callback will execute and is it possible for the user to click on the anchor (the document has been shown in the browser) but the event hasn't been attached yet.
以下是包含锚点的不同HTML页面，但是脚本的包含顺序不同.它们之间有什么区别(如果有)?不同的浏览器的行为会有所不同吗?
Here are different HTML pages that contain an anchor but the order of inclusion of the scripts is different. What's the difference (if any) between them? Will different browsers behave differently?
第1页:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</head>
<body>
<a href="http://www.google.com">Test</a>
</body>
</html>
第2页:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<a href="http://www.google.com">Test</a>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</body>
</html>
第3页:
<html>
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="http://www.google.com">Test</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('a').click(function() {
alert('overriding the default action');
return false;
});
});
</script>
</body>
</html>
那么是否有可能通过单击锚点将用户重定向到href而从不查看警报(当然，请忽略javascript的情况)?我提供的任何示例都可能会发生这种情况吗?
So is it possible that a user gets redirected to the href by clicking on the anchor and never sees the alert (ignoring the case of javascript disabled of course)? Could this happen in any of the examples I provided?
我需要做的就是确保在用户有可能单击该锚点之前，已将click事件处理程序附加到该锚点.我知道我可以提供一个空的href，然后在javascript中逐步增强它，但这是一个更普遍的问题.
All that I need is to make sure that the click event handler has been attached to the anchor before the user has any possibility to click on this anchor. I know that I can provide an empty href and then progressively enhance it in javascript but this is a more general question.
如果Web服务器快速生成HTML，但是jquery库需要花费时间从远程服务器获取内容，将会发生什么情况?这会影响我的情况吗?与加载DOM相比，包含脚本的顺序是什么?它们可以并行完成吗?
What will happen in case that the HTML is quickly generated by the web server but the jquery library takes time to be fetched from a distant server? Will this influence my scenario? What's the order of inclusion of the scripts compared to loading the DOM? Could they be done in parallel?
推荐答案
示例3 将有最高的机会，用户可以在没有附加处理程序的情况下单击链接.由于您是在 之后加载jQuery库，因此会呈现该链接，因此，如果Google的服务器运行缓慢(或者DNS查找需要一秒钟左右)，或者用户计算机处理jQuery的速度很慢，则用户尝试单击该链接时，将不会附加其单击处理程序.
Example 3 will have the highest chance of the user being able to click on the link without the handler having attached itself yet. Since you are loading the jQuery library after the link is rendered, if Google's servers are a little slow (or the DNS lookup takes a second or so), or the users computer is slow to process jQuery, the link will not have its click handler attached when the user tries to click it.
可能发生这种情况的另一种情况是，如果您的加载页面很大或很慢，并且此链接位于顶部.然后，当DOM的一部分可见时，它可能尚未完全准备就绪.如果您遇到这样的问题，最安全的事情是:
Another situation where this might happen is if you have a very large or slow loading page and this link is at the top. Then the DOM may not be fully ready when parts of it are visible. If you are running into a problem like this, the safest thing to do is:
- 在
head中加载jQuery(示例1或2) - 在
<a>元素之后立即添加click事件，但不要在DOMReady回调中.这样，它将立即被调用，而不会等待文档的其余部分.
- Load jQuery in the
head(example 1 or 2) - Attach the click event immediately after the
<a>element, but not in a DOMReady callback. This way it will be called immediately and will not wait for the rest of the document.
一旦呈现了一个元素，就可以从DOM中获取它，随后jQuery可以访问它:
Once an element is rendered, it can be grabbed from the DOM, and subsequently jQuery can access it:
<a href="http://www.google.com">Test</a>
<script type="text/javascript>
// No (document).ready is needed. The element is availible
$('a').click(function() {
alert('overriding the default action');
return false;
});
</script>
此外，以user384915的注释为基础，如果操作完全依赖于JavaScript，则甚至不将其呈现为HTML的一部分，而是在jQuery准备就绪后添加它:
Additionally, building on user384915's comment, if the action is fully dependent on JavaScript, then don't even render it as part of the HTML, add it after jQuery is ready:
<script type="text/javascript">
jQuery(function($){
$("<a />", {
style: "cursor: pointer",
click: function() {
alert('overriding the default action');
return false;
},
text: "Test"
}).prependTo("body");
});
</script>
这篇关于究竟何时执行$(document).ready回调?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
