JavaScript Waiting . Muchas personas me suelen preguntar cómo podemos construir un método en JavaScript que se facilite la ejecución de código después de un tiempo determinado. Normalmente cuando queremos realizar esta operación en JavaScript invocamos al método setTimeout y definimos un tiempo de espera.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function invocar() {
setTimeout(function() {
console.log("hola");
},3000);
};
</script>
</head>
<body>
<input type="button" onclick="invocar()" value="aceptar" />
</body>
</html>
Esta solución nos puede parecer razonable y lo que hace es emitir un mensaje con un hola en la consola
JavaScript Waiting
Una opción más sólida que tenemos es usar programación funcional y definir una función de Wait que nos haga las cosas un poco mas naturales a la hora de programar.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function invocar() {
wait(3000).then(function() {
console.log("hola");
});
}
var wait = function(tiempo) {
return {
then: function(f) {
setTimeout(f, tiempo);
}
};
};
</script>
</head>
<body>
<input type="button" onclick="invocar()" value="aceptar" />
</body>
</html>
En este caso hemos definido una función wait que usa internamente un objeto que contiene la función then y esta función es un high order function que permite recibir como parámetro cualquier otra función .
De esta manera cuando nosotros invoquemos el método wait será tan sencillo como pasarle el tiempo que deseamos esperar e invocar posteriormente al método then para definir que código se desea ejecutar después de pasado el tiempo
wait(3000).then(function() {
console.log("hola");
});
Acabamos de construir una función de JavaScript Waiting que siempre nos será útil 🙂