Para ejecutar una función automáticamente después de esperar un tiempo, estamos usando el método jQuery delay() .
El método .delay() en jQuery que se usa para configurar un temporizador para retrasar la ejecución del siguiente elemento en la cola.
Sintaxis:
$(selector).delay(para1, para2);
Acercarse:
- Cuando se hace clic en el botón, el proceso se retrasa hasta el período de tiempo específico utilizando el método .delay() .
- Las funciones o procesos se ponen en cola usando el método .queue() . Después de ejecutar el proceso o las funciones, todas las funciones ejecutadas se eliminan de la cola mediante el método .dequeue().
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>How to call a function automatically
after waiting for some time using jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
img {
display: none;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>How to call a function automatically
after waiting for some time using jQuery</h3>
<button type="button" class="show-image">Click</button>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190912174307/qwe1.png" />
<script type="text/javascript">
function showImg() {
$("img").fadeIn(1500);
}
$(document).ready(function() {
$(".show-image").click(function() {
$(this).text('Wait...').delay(1000).queue(function() {
$(this).hide();
showImg();
$(this).dequeue();
});
});
});
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2: junto con el método de alerta
html
<!DOCTYPE html>
<html>
<head>
<title>How to call a function automatically
after waiting for some time using jQuerye</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
img {
display: none;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>How to call a function automatically
after waiting for some time using jQuery</h3>
<button type="button" class="show-image">
Click
</button>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190912174307/qwe1.png" />
<script type="text/javascript">
function showImg() {
$("img").fadeIn(1500);
}
$(document).ready(function() {
$(".show-image").click(function() {
$(this).text('Wait...').delay(1000).queue(function() {
$(this).hide();
showImg();
$(this).dequeue();
alert("Waiting time is over");
});
});
});
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA