jQuery setTimeout

Last Updated : 28 Dec, 2023

In jQuery, the setTimeout function is not a built-in jQuery function, it’s a standard JavaScript function. You can use it in jQuery to introduce delays in your code.

Make sure to include the jQuery library in your HTML file before using jQuery code:

<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" 
            integrity= 
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" 
           crossorigin= "anonymous" 
           referrerpolicy= "no-referrer"> 
</script>

Syntax:

$(document).ready(function() {
    // Your initial code here
    setTimeout(function() {
        // Code to be executed after the delay
    }, delayInMilliseconds); 
});

Approach:

Include jQuery library in your HTML file using a script tag.
Wrap your jQuery code inside $(document).ready(function() { ... }); for execution after the DOM has loaded.
Use setTimeout within the $(document).ready() block to introduce a delay before executing a specific action.
Customize the delay time in milliseconds and the code inside the setTimeout function based on your requirements.

Example 1: In this example, setTimeout in jQuery is used to delay the fadeIn effect on an HTML element. The element becomes visible after a 2-second delay.

HTML

<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>jQuery setTimeout Example 1</title>
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity= 
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin= "anonymous"
            referrerpolicy= "no-referrer"> 
    </script>
    <script>
        $(document).ready(function() {
            // Set a timeout to execute a function after a 2-second delay
            setTimeout(function() {
                // Code to be executed after the delay
                // This could include jQuery operations, such as manipulating the DOM
                $('#elementId').fadeIn();
            }, 2000);
        });
    </script>
</head>
   
<body>
    <div id="elementId" style="display:none;">
      This element will fadeIn after 2 seconds.
      </div>
</body>
   
</html>

Output:

faaadddeeee

Example 2: In this example, setTimeout in jQuery is used to delay fadeOut method on a specific HTML element. The element disappears after a 4-second delay.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>jQuery setTimeout Example 4</title>
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity= 
"sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin= "anonymous"
            referrerpolicy= "no-referrer"> 
    </script>
    <script>
        $(document).ready(function () {
            // Set a timeout to execute a function after a 4-second delay
            setTimeout(function () {
                // Code to be executed after the delay
                // This could include any jQuery operations
                $('#elementToDisappear').fadeOut();
            }, 4000);
        });
    </script>
</head>
 
<body>
    <div id="elementToDisappear">
          This element will disappear after 4 seconds.
      </div>
</body>
 
</html>