Las declaraciones de JavaScript siempre se ejecutan línea por línea. Sin embargo, dado que los efectos de JQuery requieren algún tiempo para finalizar, las siguientes líneas de código pueden ejecutarse mientras los efectos anteriores aún se están ejecutando. Esto está destinado a crear errores y superposición de efectos y animaciones.
Para evitar que esto ocurra, JQuery proporciona una función de devolución de llamada para cada efecto.
Una función Callback() se ejecuta una vez que se completa el efecto. Siempre se escribe en como el último argumento del método.
Sintaxis:
$(selector).effect_function(speed, callback);
Enfoque:
no usaremos la función de devolución de llamada e intentaremos codificar para alternar un elemento div . Mientras tanto, buscaremos una alerta (alerta del navegador Javascript) para mostrar cómo la devolución de llamada() es útil para nosotros.
Ejemplos-1: definimos un div y agregamos un botón debajo del div. Ahora hacemos que el botón permita que el div se oculte usando un código JQuery simple.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Callback function
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
p {
background: white;
border: 1px green solid;
font-size: 30px;
padding: 30px;
text-align: center;
color: green;
}
button {
background: orange;
border: 1px black dashed;
font-size: 15px;
padding: 10px;
text-align: center;
color: white;
cursor: pointer
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
// toggle the div, using slideToggle effect.
$("p").slideToggle("fast");
//alert outside callback
alert("We didnot use the callback() function :");
$('#b').text("Show it!");
});
});
</script>
</head>
<body>
<p>GeeksForGeeks</p>
<button id="b"
type="button">
Hide it!
</button>
</body>
</html>
Producción:
Antes de hacer clic:
Alerta después de hacer clic:
Después de hacer clic:
Ejemplo-2: ahora agregamos la función de devolución de llamada dentro de slideToggle().
Mira el código y la diferencia:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Callback function
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<style type="text/css">
p {
background: white;
border: 1px green solid;
font-size: 30px;
padding: 30px;
text-align: center;
color: green;
}
button {
background: orange;
border: 1px black dashed;
font-size: 15px;
padding: 10px;
text-align: center;
color: white;
cursor: pointer
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").slideToggle("fast",
function callback() {
$('#b').text("Show it!");
// alert define inside the callback
alert("Now we use the Callback()");
});
});
});
</script>
</head>
<body>
<p>GeeksForGeeks</p>
<button id="b" type="button">Hide the Div</button>
</body>
</html>
Producción:
Antes de hacer clic:
Alerta después de hacer clic:
Después de hacer clic: