Estoy creando una aplicación en la que algunas funciones de JavaScript tardan en completarse. La lógica es extensiva a la CPU sin llamadas XHR.
Durante ese tiempo, quiero mostrar una superposición (Por favor, espere...) que indica al usuario que espere y también le impide presionar más botones.
Para probar mi código original, preparé un fragmento separado para verificar si alguna otra lógica no está creando problemas pero tiene el mismo comportamiento.
const btn = document.querySelector('#showModal'); const modal = document.querySelector('.modal'); btn.addEventListener('click', ()=>{ modal.classList.toggle('is-open'); // takes about 3 - 4 seconds to complete. timeTakingFuction(); modal.classList.toggle('is-open'); });Soy un principiante en javascript y tengo una idea aproximada de que aparece el modal de espera pero después de que se complete la función.
Por favor, alguien me puede ayudar en la dirección correcta.
Puede cambiar su marcado para que al hacer clic en el botón muestre el modal y luego ejecute su función timeTakingFuction() . En esta función, configure que después de que termine, oculte el modal.
Algo como eso:
const btn = document.querySelector('#showModal'); const modal = document.querySelector('.modal'); btn.addEventListener('click', ()=>{ modal.classList.toggle('is-open'); // takes about 3 - 4 seconds to complete. timeTakingFuction(); }); function timeTakingFuction() { // your logic and then -> modal.classList.toggle('is-open'); };O incluso algo así:
btn.addEventListener('click', timeTakingFuction); function timeTakingFuction() { modal.classList.toggle('is-open'); // your logic and then -> modal.classList.toggle('is-open'); };