Skip to content
Related Articles
Open in App
Not now

Related Articles

How to call a function automatically after waiting for some time using jQuery?

Improve Article
Save Article
  • Last Updated : 17 Feb, 2022
Improve Article
Save Article

In order to run a function automatically after waiting for some time, we are using the jQuery delay() method
The .delay() method in jQuery which is used to set a timer to delay the execution of the next item in the queue.
Syntax: 
 

$(selector).delay(para1, para2);

Approach: 
 

  • When the Button is clicked the process is delayed to the specific time period using .delay() method.
  • Functions or process is queued using .queue() method.                                                                                                                                                            After the process or functions are executed, all executed functions are dequeued using .dequeue() method.

Example 1: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>How to call a function automatically
      after waiting for some time using jQuery</title>
  </script>
    <style type="text/css">
        img {
            display: none;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
        GeeksForGeeks
    </h1>
        <h3>How to call a function automatically
          after waiting for some time using jQuery</h3>
        <button type="button" class="show-image">Click</button>
        <img src=
        <script type="text/javascript">
            function showImg() {
                $("img").fadeIn(1500);
            }
 
            $(document).ready(function() {
                $(".show-image").click(function() {
                    $(this).text('Wait...').delay(1000).queue(function() {
                        $(this).hide();
                        showImg();
                        $(this).dequeue();
 
                    });
                });
            });
 
        </script>
    </center>
</body>
 
</html>

Output: 
 

Example 2: Along with alert method 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>How to call a function automatically
      after waiting for some time using jQuerye</title>
  </script>
    <style type="text/css">
        img {
            display: none;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
        GeeksForGeeks
    </h1>
        <h3>How to call a function automatically
      after waiting for some time using jQuery</h3>
        <button type="button" class="show-image">
          Click
      </button>
        <img src=
        <script type="text/javascript">
            function showImg() {
                $("img").fadeIn(1500);
            }
            $(document).ready(function() {
                $(".show-image").click(function() {
                    $(this).text('Wait...').delay(1000).queue(function() {
                        $(this).hide();
                        showImg();
                        $(this).dequeue();
                        alert("Waiting time is over");
                    });
                });
            });
        </script>
    </center>
</body>
 
</html>

Output: 
 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!