Tengo una ventana emergente de SweetAlert2 que verifica las imágenes cargadas por los usuarios. Después de que el usuario decida, necesito continuar/detener la función principal.
Pero simplemente ignora la función .then adjunta a Swal. Entonces, si el img tiene una buena resolución, devuelve verdadero . Y de lo contrario simplemente devuelve falso . Incluso si aparece la ventana emergente. Ya ejecutó el resto del código de la función principal. Función de verificación de img:
function verifyimage(imgurl) { return new Promise((resolve) => { var tmpImg = new Image(); tmpImg.src = imgurl; $(tmpImg).on("load", function () { var orgWidth = tmpImg.width; //w var orgHeight = tmpImg.height; //h if (orgHeight <= 720 || orgWidth <= 1500) { Swal.fire({ position: "center", icon: "error", title: `title`, showConfirmButton: true, showCancelButton: true }).then((result) => { if (result.isConfirmed) { resolve(true); //img ok } else { resolve(false); //dont upload } }); } else { resolve(true); //upload, good resolution } }); }); }Función principal:
$(document).on("click", "#upload-it", async function() { var valueimg = geturl(); var imgvefify = await verifyimage(valueimg); if (!imgvefify) { console.log("nope, invalid img"); return false; } //upload to server etc.. });Has formulado esta pregunta como si SweetAlert2 no estuviera respetando tu then , pero creo que en realidad es el caso de que jQuery no está esperando ni respetando tu return false ; lo está emitiendo en una async function y jQuery simplemente no sabe cómo esperar Promesas en los controladores de eventos.
Su función pasada a on devuelve una Promesa, porque todas las funciones async devuelven una Promesa en todos los casos. Parece que desea que return false cancele el comportamiento predeterminado del botón #upload-it que presumiblemente envía un formulario, pero los controladores de eventos de JavaScript no entienden cuándo los controladores de eventos devuelven Promises, y jQuery tampoco . Esto hace que sea imposible usar return false para cancelar el comportamiento predeterminado en un controlador de eventos de async function .
En su lugar, asegúrese de evitar inmediatamente el comportamiento predeterminado y detenga la propagación antes de esperar algo, lo que puede hacer llamando a métodos en el objeto de evento . Una vez que haya evitado el comportamiento predeterminado, no podrá "continuarlo" una vez que se complete la async function , pero aún puede enviar el formulario mediante programación .
$(document).on("click", "#upload-it", async function(event) { event.preventDefault(); event.stopPropagation(); // validate the form // upload to server etc.. });