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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

Example 2: Along with alert method

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:



My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.