How to delay document.ready() method until a variable is set in jQuery ?

Last Updated : 23 Feb, 2022

In this article, we will learn to delay document.ready until a variable is set. The document.ready() method is used to execute some jQuery or JavaScript scripts when the HTML DOM is completely loaded.

There are two approaches that can be followed here:

Approach 1: Using the holdReady() method in the jQuery library and the setTimeout() method. First we set the parameter in the holdReady() method to true to hold the execution of the document.ready() method. Then, a timeout function with an appropriate delay time can be added using the setTimeout() method. Within this timeout method, a variable is defined and subsequently the holdReady() is called once again but this time the parameter is set to false to release the execution of the document.ready() method. Lastly, the document.ready() method is called and within this method, the variable is now set and a division element is displayed stating that the variable has been set. The content of the division element is set using the text() method in jQuery.

Example: In this example, there is a delay of 3 seconds (3000 milliseconds) in the setTimeout() method after which the variable is set and the HTML DOM is fully loaded.

HTML

<!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>

Output:

Approach 2: Using the holdReady() method in the jQuery library and the setInterval() method. This approach is very identical to the previous approach but the key distinctions lie in the syntax of the document.ready method which is represented as $(function(){ .. }) & the setInterval() method is used instead of the setTimeout() method. Usually, we use the setInterval() method to repeat the passed function at some time interval but in this case, it serves the same purpose as the setTimeout() method. All the underlying logic remains the same as before.

Example: In this example, there is a delay of 2 seconds (2000 milliseconds) in the setInterval() method after which the variable is set and the HTML DOM is fully loaded.