CODEWITHSUNDEEP
jquery
Muzz
Muzz

Reputation: 687

How to properly use delay function

The delay function isn't working as I expect it should. I'm sure I'm doing something wrong. I have an overlay that I want to use. When a user clicks a link, I'd like this function to delay for 1 second and then "release", allowing the user to go to the link they clicked on. How can I do this?

     $("body").append("<div id='overlay'></div>");
     $("#overlay").height(docHeight).css({
...
      }).delay(1000);  <-- This is where I think it should go...
    });

EDIT:

I've tried both solutions offered but I can't get the overlay to hold. The screen just refreshes in about half a second. It's ignoring the setTimeout function. What I did to test the setTimeout function was the following but I don't even get the alert. I'm assuming that I would put my overlay code in place of where I have the alert(), right?

Just for clarity, what I expect to see is a 1 second delay when the .load selector is clicked then the user forwarded to the link they clicked.

  $('.load').click(function() {
    setTimeout(function(){
      alert();
    }, 1000);
  });

Upvotes: 1

Views: 309

Answers (3)

frumbert
frumbert

Reputation: 2427

Funny, I came across just a thing for this last night (which helped me out).

http://benalman.com/projects/jquery-dotimeout-plugin/

this is a plugin that allows you to either work like a timeout - e.g. do something in X ms; but it also allows you to perform a delay/sleep/wait like feature on a chain (sort of)

Upvotes: 1

Tadeck
Tadeck

Reputation: 137450

How .delay() works

From the documentation:

.delay() - Set a timer to delay execution of subsequent items in the queue.

And example usage:

$("div.first").slideUp(300).delay(800).fadeIn(400);

Solution

If you want however to delay execution of some command and it is not in the queue like the above, then just use simple JavaScript's setTimeout():

setTimeout(function(){
    $("#overlay").height(docHeight).css({
        ...
    });
}, 1000);

In your case this is the preferred solution, as delay() works only on queued items (as mentioned above). As a proof see that this is not working: http://jsfiddle.net/xaC3m/

Upvotes: 0

Ekin Koc
Ekin Koc

Reputation: 3007

jQuery delay function is a helper for jQuery animations. It does not delay an arbitrary operation. If you need to delay something, use setTimeout.

Following would execute the inner function after 1 second.

setTimeout(function() { $("#overlay").height(100); }, 1000);

Upvotes: 5

Related Questions