解决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之后进行高度的计算和赋值，确保使用了图片加载后的实际高度。
以上就是如何解决img.onload事件优先导致JavaScript函数draw()中高度计算错误的问题？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2798796.html
