如何在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>

输出:

如何在jQuery中延迟document.ready()方法，直到一个变量被设置？

方法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>