jQuery's function $(function())的执行顺序当$(function())被多次调用时
jQuery's function $(function())’s execute order when the $(function()) called more one times
如下代码:
$(window.document).ready(function () {
window.alert('alert 1');
});
$(function () {
window.alert('alert 2');
});
$(function () {
window.alert('alert 3');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo2</title>
<script src="jquery-3.1.1.js"></script>
<script src="demo2.js"></script>
</head>
<body>
</body>
</html>
当我执行上面的代码时,页面的警告顺序有时是:警报1,警报2,警报3,有时是:警报1,警报3,警报2。谁能告诉我为什么?
在3930
到3947
行,jQuery版本3.1.1处理.ready()
在document
已经加载后被调用。在第3938行jQuery.ready
在setTimeout
内部调用,没有设置持续时间,附加注释
// Handle it asynchronously to allow scripts the opportunity to delay ready
这就解释了为什么window.alert('alert 3')
可能会在window.alert('alert 2')
之前被调用
// Catch cases where $(document).ready() is called
// after the browser event has already occurred.
// Support: IE <=9 - 10 only
// Older IE sometimes signals "interactive" too soon
if ( document.readyState === "complete" ||
( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready ); // Line 3938
} else {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed );
}
下面的stacksnippet应该重现OP
描述的结果<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo2</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(window.document).ready(function() {
window.alert('alert 1');
});
$(function() {
window.alert('alert 2');
});
$(function() {
window.alert('alert 3');
});
</script>
</head>
<body>
</body>
</html>
参见3924
行completed
函数
// The ready event handler and self cleanup method
function completed() {
document.removeEventListener( "DOMContentLoaded", completed );
window.removeEventListener( "load", completed );
jQuery.ready();
}
参见plnkr http://plnkr.co/edit/C0leBhYJq8CMh7WqndzH?p=preview at version 1
编辑,更新
为了确保.ready()
函数的执行顺序,你可以从函数调用中返回一个承诺,在单个.ready()
调用中使用.then()
来调用全局定义的函数或之前在.ready()
处理程序中定义的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo2</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
function ready1(wait, index) {
// do stuff
return new Promise(resolve => {
setTimeout(() => {
window.alert('alert ' + index);
resolve(index)
}, wait)
})
.then((i) => console.log(i))
}
function ready2(wait, index) {
// do stuff
return new Promise(resolve => {
setTimeout(() => {
window.alert('alert ' + index);
resolve(index)
}, wait)
})
.then((i) => console.log(i))
}
function ready3(wait, index) {
// do stuff
return new Promise(resolve => {
setTimeout(() => {
window.alert('alert' + index);
resolve(index)
}, wait)
})
.then((i) => console.log(i))
}
$().ready(function() {
ready1(3000, 0)
.then(function() {
return ready2(1500, 1)
})
.then(function() {
return ready3(750, 2)
});
})
</script>
</head>
</html>
相关文章:
- ajax请求的顺序总是不同的
- 按照选项卡索引的顺序循环一个jQuery选择
- 直接在函数声明上使用function.prototype.bind
- jQuery:.click(function(){(element),collapse('show',f
- 匹配一个单词,其中候选人可以跨越顺序组(跨度)
- 按顺序添加和删除类
- 按我自己的类克隆另一个元素的内容和顺序
- Javascript-根据赋值顺序,按键合并对象数组
- 2个backbone.js集合,具有相同的模型,但排序顺序不同
- querySelector/getElementByClassName嵌套项的顺序
- 如果连接类型为none,则Javascript Function Only警报
- 以不同的顺序输出数据
- 重新排列HTML元素的顺序并更改内容
- 在Javascript中列出顺序子集元素
- 是否“;对于的“;循环迭代遵循JavaScript中的数组顺序
- Mongodb$in以与数组中相同的顺序获取结果
- onLoad function phonegap android
- 如何使用phonegap从安卓设备中提取联系人的字母顺序
- Var和function的工作顺序错误
- jQuery's function $(function())的执行顺序当$(function())被多次调用时