const img = document.getElementById("bg");
const message = () => {
return new Promise((resolve, reject) => {
img.onload = () => {
resolve("Image loaded successfully"); // 返回回调函数的结果
};
});
};
const AsyncTest = async () => {
try {
const msg = await message();
console.log(msg);
} catch (error) {
console.log(error);
}
};
上面的代码确实能够将回调函数的返回值作为 Promise 的调用结果返回。
随后突发奇想,用下面这种方式分别异步调用两次上面代码中的 AsyncTest 的函数:
// 连续两次调用 AsyncTest 函数
AsyncTest().then(() => {
console.log("Async function executed");
});
AsyncTest().then(() => {
console.log("Async function executed");
});
结果发现虽然两次调用,但是只有一个调用有返回,个人的理解是:
这样是否就意味着,第一次的 Promise 始终没有完成,保存在栈空间中,并在 EventLoop 中循环等待 resolve 的调用。 在图片加载完成后拍了堆快照,发现堆中确实留下了一个 Promise 的空间:
请教一下,这是否意味着这块内存空间是否会始终被占用,以及利用 Promise 监听 onload 回调这种写法是否妥当?