行目3930〜3947documentが既にロードされた後で、jQueryバージョン3.1.1が.ready()を処理します。ライン3938でjQuery.readyはwindow.alert('alert 3')が潜在的に以下のstacksnippet 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);
}
前に呼び出すことができる方法を説明します添付コメント
// Handle it asynchronously to allow scripts the opportunity to delay ready
で設定した時間がなくてsetTimeoutの内部で呼び出されるべきですOP
で記述されている再生結果210
<!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
// The ready event handler and self cleanup method
function completed() {
document.removeEventListener("DOMContentLoaded", completed);
window.removeEventListener("load", completed);
jQuery.ready();
}
は、バージョン1
編集でhttp://plnkr.co/edit/C0leBhYJq8CMh7WqndzH?p=preview plnkrを参照してくださいラインでもcompleted機能を参照してください
.ready()の関数の実行順序を確実にするには、関数呼び出しから約束を返すことができます。を呼び出して、.ready()呼び出し関数を呼び出すか、またはグローバルに定義された関数を呼び出すか、または.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>
あなたはjQueryのどのバージョンをしてみたのですか？ plnkr http://plnkr.coで問題を再現できますか？ – guest271314
10回実行しようとしたらうまく見えます。 –
http://stackoverflow.com/questions/3934570/order-of-execution-of-jquery-document-ready –