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

Check out this Author's contributed articles.

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.