gpt4 book ai didi

javascript - 多个 $(document).ready 和 $(window).load 在 $(document).ready

转载 作者:搜寻专家 更新时间:2023-11-01 04:13:35 24 4
gpt4 key购买 nike

我有 2 个问题。首先,这不是我的作品。我目前正在查看其他人的 JavaScript 文件。我无法给出确切的代码,但我可以展示我想知道的内容。

在 JavaScript 文件中,我看到了很多 $(document).ready(function(){});。我知道 $(document).ready 是做什么的,回调函数会在加载 DOM 树时调用。为什么有人会使用多个 $(document).ready 回调?我不明白这一点。

此外,我看到的另一件事是 $(document).ready 中的 $(window).load,如下所示:

$(document).ready(function() {
$(window).load(function() {
//...
});
});

据我所知,$(window).load() 在加载页面的所有内容(如 Assets 和图像等)时被调用。我认为 $(window)。 load() 是在 $(document).ready 之后调用的最后一个东西。是否有任何时间在 $(document).ready 之前调用 $(window).load 并且是否有任何理由放置 $(window ).load inside a $(document).ready?

最佳答案

是的,jQuery 允许 ready 事件在 load 之前被调用。即使在 IE8 中(不支持 DOMContentLoaded),它也以这种方式工作。但是让我们看看下面的代码:

<!doctype html>

<title>Ready vs load test</title>

<style>body {white-space: pre}</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script>
~function () {
function log(msg) {
document.body.innerHTML += msg + "\n";
}

function handler(msg) {
return function () {
log(msg);
}
}

$(window).load(handler("5. load #1"));
$(document).ready(handler("1. ready #2"));
$(window).load(handler("6. load #3"));
$(document).ready(handler("2. ready #4"));
$(document).ready(function () {
log("3. ready #5");
$(window).load(handler("8. load #6"));
});
$(document).ready(handler("4. ready #7"));
$(window).load(handler("7. load #8"));
}();
</script>

结果是

1. ready #2
2. ready #4
3. ready #5
4. ready #7
5. load #1
6. load #3
7. load #8
8. load #6

查看第 7 行和第 8 行。从 ready 事件附加的 load 处理是最后一个。因此,通过使用这种方式,我们可以确保所有先前添加的(在脚本解析和执行期间)load 处理程序都已被调用。

so using $(window).load outside the $(document).ready and inside doesn't change that much from how it'd affect how stuff work?

实际上它会影响脚本的执行。第一个版本有效,第二个版本无效:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
$(window).load(function () {
$.magic.value = 12;
});
});
</script>

<script>
$(window).load(function () {
$.magic = {};
});
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function () {
});

$(window).load(function () {
$.magic.value = 12;
});
</script>

<script>
$(window).load(function () {
$.magic = {};
});
</script>

关于javascript - 多个 $(document).ready 和 $(window).load 在 $(document).ready,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42341284/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com