等待函数不使用jQuery事件处理程序
等待函数不使用jQuery事件处理程序
提问于 2022-02-25 19:05:46
我有一个SweetAlert2弹出来验证用户上传的图片。在用户决定之后，我需要继续/停止主函数。
但是它忽略了附加于Swal的.then函数。因此，如果img具有良好的分辨率，则返回真正的。否则，它只是返回假。即使弹出窗口显示。它已经运行了其余的主要函数代码。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
}
});
});
}主要职能：
$(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..
});回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-25 21:57:17
这个问题的措辞好像SweetAlert2不尊重您的then一样，但我认为实际上jQuery并不是在等待或尊重您的return false；您是在一个async function中发布它，而jQuery只是不知道如何在事件处理程序中等待承诺。
传递给on的函数返回一个承诺，因为在所有情况下，所有async函数都返回一个承诺。您似乎希望return false取消#upload-it按钮的默认行为，该按钮可能提交表单，但是JavaScript事件处理程序不了解事件处理程序何时返回承诺，以及jQuery也没有。这使得无法使用return false取消async function事件处理程序中的默认行为。
相反，在等待任何东西之前，请确保立即防止默认行为并停止传播，这是您可以做的通过调用事件对象上的方法。在阻止了默认行为之后，一旦async function完成，您将无法“继续”它，但仍然可以使用以编程方式提交表单。
$(document).on("click", "#upload-it", async function(event) {
event.preventDefault();
event.stopPropagation();
// validate the form
// upload to server etc..
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71270633
复制相关文章
相似问题
腾讯云开发者
