Jquery Retardo Después Haga clic

Question

Estoy creando una aplicación web ...

me dieron una especie de juego, mi idea es cuando el usuario completa aparece cada nivel un cuadro de diálogo con información, que está muy bien.

Ahora mi problema es que quiero mostrar este mensaje 5 segundos después de que el usuario haga clic en el botón de finalizar.

esa es mi código:

$('#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>\ 
     '); 
    }); 

También He probado con append().Delay(10000) pero no funciona.

Gracias de antemano.

Answer 1

Utilice setTimeout() con un retraso de 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>

Sólo por curiosidad, ¿por qué quieres que esperar 5 segundos antes de preguntar al usuario en respuesta a una acción? Eso es un largo tiempo; el tiempo suficiente para que hayan hecho clic en un montón de otras cosas (si nada más).

Answer 2

Puede intentar con setTimeout().

Example.

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

El 5000 puede ser reemplazado con cualquier valor de tiempo que determina la duración de la demora en milisegundos.

Answer 3

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

Answer 4

No puede retrasar un apéndice. Solo puedes retrasar las animaciones. Se podría utilizar setTimeout o mostrar el elemento oculto inicialmente y luego se desvanecen en:

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

Answer 5

intento:

$('#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 6

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

Esto funcionará

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

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