Jquery Delay After Click

Question

I'm creating a web app...

i got a kind of game, my idea is when the user completes each level appears a dialog box with some information, it is fine.

Now my issue is i want to show this message 5 seconds after the user clicks on the finish button.

thats my code:

$('#option-main-menu').click(function(){
        target.append('\
            <div id="confirm">\
                <h1>Are You Sure Want to Exist?</h1>\
                <a href="#" id="dialog-confirm">Yes</a><a href="#" id="dialog-cancel">No</a>\
            </div>\
        ');
    });

also i tryed with append().Delay(10000) but does not work.

Thanks in advance.

I like the message, "Are You Sure Want to Exist?" – Tim M. Jan 06 '12 at 02:05 — Tim M., Jan 06 '12 at 02:05
@Tim, this is the Dr. Kevorkian game. :) – Jonathan M Jan 06 '12 at 02:07 — Jonathan M, Jan 06 '12 at 02:07

Tim M. · Accepted Answer · 2014-12-12T16:31:17.990

Use setTimeout() with a delay of 5000 ms.

$("button").click(
    function() {
        console.log("clicked...waiting...");

        setTimeout(
            function() {
                alert("Called after delay.");
            },
            5000);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">Click Me</button>

Just out of curiosity, why would you want to wait 5 seconds before prompting the user in response to an action? That's a long time; long enough for them to have clicked on a bunch of other things (if nothing else).

Purag · Answer 2 · 2012-01-06T02:10:07.413

13

You could try using setTimeout().

Example.

setTimeout(function(){
    // do stuff here, in your case, append text
}, 5000);

The 5000 can be replaced with any value of time that determines the length of the delay in milliseconds.

edited Jan 06 '12 at 02:10

answered Jan 06 '12 at 02:05

Purag

16,941
4
54
75

1

Wrong. `delay()` only affects that animation queue. – SLaks Jan 06 '12 at 02:06
@SLaks: Good point--I didn't realize that. I've edited my answer and added an example. – Purag Jan 06 '12 at 02:08

score 2 · Answer 3 · answered Jan 26 '17 at 17:39

2

This will work

$("button").click(
function() {
    console.log("clicked...waiting...");

    setTimeout(
        function() {
            alert("Called after delay.");
        },
        5000);
});

answered Jan 26 '17 at 17:39

score 1 · Answer 4 · answered Dec 16 '15 at 12:35

1

$("button").click(
    function() {
        console.log("clicked...waiting...");

        setTimeout(
            function() {
                alert("Called after delay.");
            },
            5000);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">Click Me</button>

answered Dec 16 '15 at 12:35

Dinesh

41
5

2

Please don't just dump code as an answer. Explain this so it helps future visitors. – Sterling Archer Dec 16 '15 at 13:51
1

This is pretty clear for a "code only" answer, but I agree with @SterlingArcher; it needs at least some commentary. – Justin Morgan - On strike Dec 16 '15 at 16:16

score 1 · Answer 5 · answered Jan 06 '12 at 02:07

1

You can't delay an append. You can only delay animations. You could use setTimeout or show the element initially hidden and then fade it in:

$('<div id="confirm" style="display:none"> ...')
    .appendTo(target)
    .delay(5000)
    .fadeIn(1000);

answered Jan 06 '12 at 02:07

James Montagne

77,516
14
110
130

score 1 · Answer 6 · answered Jan 06 '12 at 02:09

try:

$('#option-main-menu').click(function(){
    setTimeout(
        function(){
         target.append('\
            <div id="confirm">\
                <h1>Are You Sure Want to Exist?</h1>\
                <a href="#" id="dialog-confirm">Yes</a><a href="#" id="dialog-cancel">No</a>\
            </div>\
        ');
       }
        , 5000);
   });

DA. · Answer 7 · 2013-12-22T01:36:47.270

0

$yourThing.click(function(){
    setTimeout(function(){do your thing here},5000)
})

edited Dec 22 '13 at 01:36

answered Jan 06 '12 at 02:06

DA.

39,848
49
150
213

You need to pass a function, not call it: yourFunction, instead of yourFunction() – Pascal Dec 21 '13 at 22:08
@pascalbetz yes, that was bad pseudocode on my part. Fixed. Thanks! – DA. Dec 22 '13 at 01:36

Jquery Delay After Click

7 Answers7

Linked

Related