83

I have the below global jQuery function stored, but on page load, I want to execute it after a 1000 delay. Is there something wrong with my syntax? I know the delay always goes before the function. It is not responding.

Global function:

function showpanel() {     
       $(".navigation").hide();
       $(".page").children(".panel").fadeIn(1000);
    ;}

Executing function:

parallax.about.onload=function(){
    $('#about').delay(3000).showpanel();
};
Mohammad Kermani
  • 5,188
  • 7
  • 37
  • 61
Joe Isaacson
  • 4,012
  • 6
  • 30
  • 40
  • This is what you are looking for man:) hope this helps, http://stackoverflow.com/questions/5322344/to-delay-javascript-function-call-using-jquery – Tats_innit Jun 02 '12 at 05:59
  • The first clear problem is you are attempting to call showpanel as a method of another object (in this case, the jQuery object returned by the delay() call). But you've declared showpanel as a simple, directly-accessible function, rather than a method of any object. JavaScript doesn't work this way. – BobS Jun 02 '12 at 06:11

5 Answers5

155
$(document).ready(function() {

  // place this within dom ready function
  function showpanel() {     
    $(".navigation").hide();
    $(".page").children(".panel").fadeIn(1000);
 }

 // use setTimeout() to execute
 setTimeout(showpanel, 1000)

});

For more see here

Community
  • 1
  • 1
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
53

I searched and found the solution in the following URL is better.

http://www.tutorialrepublic.com/faq/call-a-function-after-some-time-in-jquery.php

It worth to try.

It adds your given function to the queue of functions to be executed on the matched element which is currently this.

 $(this).delay(1000).queue(function() {

     // your Code | Function here
     
     $(this).dequeue();
  
  });

and then execute the next function on the queue for the matched element(s) which is currently this again.

-- EDIT [ POSSIBLE EXPLANATION FOR THE DEQUEUE COMMAND ]

Take a look at the command

We command the jQuery engine to add a function in internal queue and then after a specific amount of time we command it to call that function, BUT so far we never told it to dequeue it from engine. Right?! And then after every thing is done we are dequeue it from jQuery engine manually. I hope the explanation could help.

ebrahim.mr
  • 699
  • 5
  • 10
  • Can you summarize the solution and explain how it works? Just linking to a solution isn't ideal because that link may stop working at some point in the future... – devlin carnate Jan 05 '16 at 15:21
  • @devlincarnate I updated the post.Read it and see it is simple to understand or not.Hope it be useful. – ebrahim.mr Jan 05 '16 at 18:37
  • 4
    This doesn't explain what queue does or why dequeue is necessary. What purpose does dequeue server; I wouldn't expect t'he function to execute more than once, so why dequeue it? – Triynko Sep 15 '16 at 13:53
  • `$('#main > ul').delay(100).queue(function () { $(this).attr('data-uk-grid', 'masonry: true; parallax: 150;').dequeue() }); $('#main > ul').delay(1).queue(function () { $(this).removeClass('uk-grid uk-flex-top uk-flex-wrap-top').dequeue() });` – Olivier Jan 03 '19 at 08:19
  • still no explanation on why the dequeue is needed? – Niklas Apr 02 '19 at 16:18
  • 1
    @Niklas I updated the post. please take a look at it. – ebrahim.mr Jul 14 '20 at 05:34
38

You can add timeout function in jQuery (Show alert after 3 seconds):

$(document).ready(function($) {
    setTimeout(function() {
     alert("Hello");
    }, 3000);
});
Prince Patel
  • 2,990
  • 1
  • 21
  • 28
1

This answer is just useful to understand how you can make delay using JQuery delay function.

Imagine you have an alert and you want to set the alert text then show the alert and after a few seconds hide it.

Here is the simple solution:

$(".alert-element").html("I'm the alert text").fadeIn(500).delay(5000).fadeOut(1000);

It is completely simple:

  1. .html() will change the text of .alert-element
  2. .fadeIn(500) will fade in after 500 milliseconds
  3. JQuery delay(5000) function will make 5000 milliseconds of delay before calling next function
  4. .fadeOut(1000) at the end of the statement will fade out the .alert-element
Mohammad Kermani
  • 5,188
  • 7
  • 37
  • 61
0

You can simply use jQuery’s delay() method to set the delay time interval.

HTML code:

  <div class="box"></div>

JQuery code:

  $(document).ready(function(){ 
    $(".show-box").click(function(){
      $(this).text('loading...').delay(1000).queue(function() {
        $(this).hide();
        showBox(); 
        $(this).dequeue();
      });        
    });
  });

You can see an example here: How to Call a Function After Some Time in jQuery

thomas
  • 785
  • 8
  • 7