极客教程如何在jQuery中延迟document.ready()方法，直到一个变量被设置
在这篇文章中，我们将学习如何将document.ready延迟到一个变量被设置。document.ready()方法是用来在HTML DOM完全加载时执行一些jQuery或JavaScript脚本。
这里有两种方法可以遵循。
方法1：使用jQuery库中的holdReady()方法和setTimeout()方法。首先，我们将holdReady()方法中的参数设置为true以保持document.ready()方法的执行。然后，可以使用setTimeout()方法添加一个具有适当延迟时间的超时函数。在这个超时方法中，定义了一个变量，随后再次调用holdReady()，但这一次参数被设置为_false，以释放document.ready()方法的执行。最后，document.ready()方法被调用，在这个方法中，变量现在被设置了，并且显示了一个分割元素，说明该变量已经被设置。分区元素的内容是用jQuery的text()方法设置的。
例子：在这个例子中，在 setTimeout()方法中，有3秒的延迟（3000毫秒），之后变量被设置，HTML DOM被完全加载。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
div {
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1></h1>
<!-- The division element -->
<div></div>
<script type="text/javascript">
.holdReady(true);
setTimeout(function () {
// Setting a variable until
// document.ready is called
const myVar = "GFG";
.holdReady(false);
}, 3000);
(document).ready(function () {
("h1").text("GeeksForGeeks");
$("div").text("The variable has been set!");
});
</script>
</body>
</html>
输出:
方法2：使用jQuery库中的holdReady()方法和setting()方法。这种方法与前一种方法非常相同，但关键的区别在于document.ready方法的语法，它被表示为$(function(){ . .}）和setInterval()方法，而不是setTimeout()方法。通常，我们使用setInterval()方法在某个时间间隔内重复传递函数，但在这种情况下，它与setTimeout()方法的作用相同。所有的底层逻辑都和以前一样。
例子：在这个例子中，setInterval()方法有2秒的延迟（2000毫秒），之后变量被设置，HTML DOM被完全加载。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 40px;
}
p,
div {
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1></h1>
<p></p>
<!-- The division element -->
<div></div>
<script type="text/javascript">
.holdReady(true);
setInterval(() => {
// Setting a variable until
// document.ready is called
var myBoolean = true;
.holdReady(false);
}, 2000);
// Same as (document).ready(function(){..})
(function () {
("h1").text("GeeksForGeeks");
("p").text(
"jQuery - Delay document.ready until a variable has been set"
);
$("div").text(
"The boolean variable has been set!");
});
</script>
</body>
</html>
输出:
