La tarea es ejecutar una serie de funciones secuencialmente en JavaScript. Es decir, ejecute la función dos SOLAMENTE después de que la primera función haya completado su ejecución.
Sintaxis:
functionName();
Enfoque: Este problema se puede resolver de múltiples maneras.
- Podemos arreglar (código duro) una función de devolución de llamada al final de la función uno. Al hacer esto, se asegura de que la función de devolución de llamada siempre se llame cuando la función finalice su ejecución. Sin embargo, un problema con este enfoque es que no podemos cambiar la función de devolución de llamada más adelante en tiempo de ejecución. Tendremos que eliminar esa línea de código O modificarla.
- Otra forma es pasar la función de devolución de llamada como parámetro a la función uno y hacer que la función uno llame a esta nueva función de devolución de llamada al final de su vida. Este enfoque es más flexible ya que nos permite cambiar la función de devolución de llamada en tiempo de ejecución sin modificar ninguna línea de código.
Echemos un vistazo a cada uno de ellos en detalle.
Ejemplo 1: En este ejemplo, corregiremos (codificaremos) una función de devolución de llamada al final de la función uno.
<!DOCTYPE html>
<html>
<head>
<title>
Call a function after
completing a function
</title>
</head>
<body>
<center>
<!-- gfg variable with no value initially -->
<h1>GeeksforGeeks</h1>
<b>A Computer Science Portal for Geeks</b>
<br>
<button>Click</button>
<p></p>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script type="text/javascript">
$('button').click(function() {
console.log("Button clicked!");
// Task is to execute callbackFirst
// function first and then execute
// callbackSecond function.
callbackFirst();
});
function callbackFirst() {
console.log("First Function start");
for (var i = 1; i < 10; i++) {
$('p').append(i + " ");
}
console.log("First Function end");
// Execute callbackSecond() now as its
// the end of callbackFirst()
callbackSecond();
}
function callbackSecond() {
console.log("Second Function start");
$('body').css({
'background-color': 'gray'
});
$('h1').css({
'color': 'green'
});
console.log("Second Function end");
}
</script>
</center>
</body>
</html>
Salida: 
en la consola después de hacer clic en el botón:
Button clicked! First Function start First Function end Second Function start Second Function end
Ejemplo 2: En este ejemplo, pasaremos una función de devolución de llamada como parámetro a la función uno para que pueda llamar a esta nueva función de devolución de llamada al final de su ejecución. La tarea es ejecutar primero la función callbackFirst y luego ejecutar la función callbackSecond. Pasar callbackSecond como parámetro a la devolución de llamada primero.
<!DOCTYPE html>
<html>
<head>
<title>Call a function after completeing a function</title>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>A Computer Science Portal for Geeks</b><br>
<button style="color: green;">Click!</button>
<p></p>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script type="text/javascript">
$('button').click(function() {
console.log("Button clicked!");
// Execute callbackSecond at the end
// of its execution
callbackFirst(callbackSecond);
});
function callbackFirst(callbackFn) {
console.log("First Function start");
for (var i = 1; i < 10; i++) {
$('p').append(i + " ");
}
console.log("First Function end");
/* Execute callbackFn() now as its
the end of callbackFirst() This
function was passed as a parameter */
callbackFn();
}
function callbackSecond() {
console.log("Second Function start");
$('body').css({
'background-color': 'green'
});
$('h1').css({
'color': 'black'
});
console.log("Second Function end");
}
</script>
</center>
</body>
</html>
Salida: 
en la consola después de hacer clic en el botón:
Button clicked! First Function start First Function end Second Function start Second Function end
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .