JavaScript es un popular lenguaje de secuencias de comandos del lado del cliente compilado, ligero e interpretado. La mayoría de las aplicaciones web utilizan JavaScript en el lado del cliente. Al proporcionar JavaScript con un entorno de tiempo de ejecución, también se puede usar en el lado del servidor (Node.js). En este artículo, cubriremos las devoluciones de llamadas y el infierno de las devoluciones de llamadas.
Devolución de llamada : una devolución de llamada es una función que se pasa como argumento a otra función que ejecuta la devolución de llamada en función del resultado. Básicamente son funciones que se ejecutan solo después de que se produce un resultado. Las devoluciones de llamada son una parte importante de JavaScript asíncrono.
Ejemplo:
Javascript
// Main function
const mainFunction = (callback) => {
setTimeout(() => {
callback([2, 3, 4]);
}, 2000)
}
// Add function
const add = (array) => {
let sum = 0;
for(let i of array) {
sum += i;
}
console.log(sum);
}
// Calling main function
mainFunction(add);
Producción:
9
Explicación: aquí hemos usado setTimeout en la función principal para imitar algunas operaciones de E/S o una llamada de solicitud. La función de devolución de llamada pasada se usa para resumir los elementos de la array. Después de que hayan pasado 2 segundos, se imprime la suma de la array, que es 9.
Callback Hell: Callback Hell es esencialmente devoluciones de llamada anidadas apiladas una debajo de la otra formando una estructura piramidal. Cada devolución de llamada depende/espera la devolución de llamada anterior, lo que crea una estructura piramidal que afecta la legibilidad y la capacidad de mantenimiento del código.
Ejemplo: en el siguiente ejemplo, hemos dividido la palabra GeeksForGeeks en tres palabras separadas y estamos tratando de animar cada palabra una tras otra.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Callback Hell</title>
<style>
* {
padding: none;
margin: none;
box-sizing: border-box;
}
.word {
color: #308d46;
font-size: 4rem;
transition: all .5s ease-in;
margin: 0 5px;
transform: translateY(3.8rem);
opacity: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 95vw;
height: 95vh;
}
.container {
overflow: hidden;
display: flex;
flex-direction: row;
}
.animate {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<div class="container">
<h2 class="word">Geeks</h2>
<h2 class="word">For</h2>
<h2 class="word">Geeks</h2>
</div>
</body>
<script>
let words = document.querySelectorAll(".word");
const animateAll = (animate) => {
setTimeout(() => {
animate(words[0]);
setTimeout(() => {
animate(words[1]);
setTimeout(() => {
animate(words[2]);
}, 1000)
}, 1000)
}, 1000)
}
const animate = (word) => {
word.classList.add("animate");
}
animateAll(animate);
</script>
</html>
Salida: Podemos notar que la función animateAll toma una estructura piramidal, lo que dificulta su lectura.
Salida de devolución de llamada animada Geeks For Geeks
Referencia: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA