Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 17 Sep, 2019

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 excuted, all excuted functions are dequeued using .dequeue() method.

Example 1:




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




<!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
Recommended Articles
Page :

Start Your Coding Journey Now!