单击后Jquery延迟

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

This will work

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

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

Answer 7

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