解决img.onload事件优先级导致javascript函数draw()中高度计算错误的问题
图片加载完成事件img.onload的异步特性可能导致draw()函数中高度计算错误。下文提供两种解决方法，确保图片加载完成后再进行高度计算。
方法一：使用setTimeout()延迟执行
在draw()函数的for循环结束后，使用setTimeout()函数延迟div高度的设置。这能确保图片加载完成之后再执行高度计算和赋值。延迟时间需根据网络情况和图片大小进行调整，建议设置为大于图片加载时间的数值，例如100毫秒：
setTimeout(() => {
// 创建 div 并分配总高度
// 将计算后的高度赋值给 div
// 返回这个 div
}, 100);
方法二：使用async/await实现同步等待
立即学习“Java免费学习笔记（深入）”；
将draw()函数声明为异步函数，并使用await关键字等待img.onload事件完成：
async function draw() {
// ...你的 for 循环逻辑 ...
if (answer_img.length === 1) {
let img = new Image();
img.src = answer_img[0].src;
await new Promise((resolve) => {
img.onload = function () {
// ...你的 img.onload 处理逻辑 ...
resolve(); // 通知 Promise 完成
};
});
// ...其余的 draw() 逻辑 ... 在 await 后面进行高度计算和赋值
}
// 返回 div
return div;
}
async/await方法更优雅地处理异步操作，使代码更易读且更易于维护。 选择哪种方法取决于项目的复杂性和个人偏好，但async/await通常被认为是更现代和更可维护的解决方案。 记住在await之后进行高度的计算和赋值，确保使用了图片加载后的实际高度。
