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

Solution 1:

Use setTimeout() with a delay of 5000 ms.

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

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><buttontype="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).

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

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

Solution 4:

try:

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

Solution 5:

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

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

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