CODEWITHSUNDEEP
javascriptjqueryhtml
Aletz Morgan
Aletz Morgan

Reputation: 290

Jquery Delay After Click

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.

Upvotes: 15

Views: 75347

Answers (7)

user4788555
user4788555

Reputation:

This will work

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

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

Upvotes: 2

Dinesh
Dinesh

Reputation: 49

$("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>

Upvotes: 1

Tim M.
Tim M.

Reputation: 54359

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).

Upvotes: 34

DA.
DA.

Reputation: 40663

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

Upvotes: 0

Purag
Purag

Reputation: 17061

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.

Upvotes: 13

Leo Chan
Leo Chan

Reputation: 31

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);
   });

Upvotes: 1

James Montagne
James Montagne

Reputation: 78630

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);

Upvotes: 1

Related Questions