确保img.onload事件顺序执行的策略
本文探讨两种方法，确保在img.onload事件完成后获取图像高度并返回数据：使用setTimeout的计时器方法和使用async/await的异步方法。
方法一：使用setTimeout的计时器方法
为了在计时器中正确返回数据，我们需要利用setTimeout函数，将数据处理和返回操作延迟到img.onload事件之后执行：
// 回调函数，处理图像高度并创建DOM元素
function callback(imgHeight) {
const div = document.createElement("div");
div.style.height = imgHeight + "px";
return div;
}
// 获取图像高度，并使用setTimeout延迟返回数据
function getImageHeight(img) {
return new Promise((resolve) => {
img.onload = () => {
setTimeout(() => {
resolve(callback(img.height)); // 将处理后的DOM元素resolve
}, 0);
};
});
}
// 示例用法
const img = new Image();
img.src = 'image.jpg'; // 替换为你的图片地址
getImageHeight(img)
.then(div => {
document.body.appendChild(div); // 将创建的div添加到页面
});
方法二：使用async/await的异步方法
使用async/await可以更清晰地处理异步操作，在img.onload回调中使用resolve函数返回图像高度：
async function getImageHeightAsync(img) {
return new Promise((resolve) => {
img.onload = () => {
resolve(img.height);
};
});
}
async function processImage() {
const img = new Image();
img.src = 'image.jpg'; // 替换为你的图片地址
const imgHeight = await getImageHeightAsync(img);
const div = document.createElement("div");
div.style.height = imgHeight + "px";
document.body.appendChild(div);
}
processImage();
两种方法都确保了在图像加载完成后再获取高度并返回数据，避免了由于异步操作导致的竞态条件。async/await方法在代码可读性和维护性方面略胜一筹，但两种方法都能达到目的。 选择哪种方法取决于你的项目和个人偏好。 请注意，代码中'image.jpg'需要替换成你的实际图片路径。
