Tengo un sitio web con algunas animaciones cuando se inicia y quiero agregar un botón para omitir la animación. Actualmente, la animación es una función con muchas esperas, entonces, ¿cómo puedo salir de este proceso cuando se hace clic en el botón de omitir animación? De hecho, solo puedo agregar if (condición === verdadero) {return;} entre cada línea, pero ¿hay alguna forma más fácil de hacerlo?
Por ejemplo, ¿cómo puedo salir inmediatamente de esta función de animación cuando se hace clic en el botón de omitir animación?
var skip-animation = document.querySelector("#skip-animation); function animation() { await function1(); await function2(); function3(); await function4(); function5(); }Una solución que se me ocurre sería poner todas sus funciones en una matriz. Luego, recorre la matriz y ejecuta cada función mientras verifica la condición.
const functions = [f1, f2, f3, f4, f5]; for (function of functions) { if (buttonNotClicked) { await function(); } }Desafortunadamente, esto no cerrará la función de inmediato como usted quería y, como dijo @JaromandaX, eso puede ser difícil o incluso imposible sin modificar las funciones de animación.
Esta es una forma en que yo mismo pensaba. Agrego una verificación antes de cada función, lo que arroja una excepción si se cumple la condición. y agregue una captura de prueba en la función de animación, que maneja la excepción. En este caso, detendrá el proceso después de skip === true, pero tampoco es "inmediato" como esperaba
skip-animation.onclick = () => { skip = true; } function func1() { if (skip === true) { throws new error("SKIP IT"); } } function animation { try { await func1(); await func2(); func3(); } catch(e) { if (e.message === "SKIP IT") { doSomething(); } else { throw e; } } }