请教 JS 中有关 Promise 和回调函数的写法问题

在网上浏览的时候看到了下面的一种写法，可以通过新建一个 Promise 对象，在 Promise 对象中绑定回调函数，并获取回调结果，类似与下面这种：


    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 ，给 onload 绑定回调函数，其中传入的 resolve 是第一个 Promise 的
此时图片还没有加载完成
第二次调用 Promise ，覆盖掉了 onload 的回调函数，其中的 resolve 变成了第二个 Promise 的
图片加载完成，调用 onload 函数，其中调用的是第二个 Promise 的 resolve

这样是否就意味着，第一次的 Promise 始终没有完成，保存在栈空间中，并在 EventLoop 中循环等待 resolve 的调用。在图片加载完成后拍了堆快照，发现堆中确实留下了一个 Promise 的空间：

请教一下，这是否意味着这块内存空间是否会始终被占用，以及利用 Promise 监听 onload 回调这种写法是否妥当？

jerry4718

2024-06-14 00:54:57 +08:00

抱歉，眼瞎了
我觉得用 Promise 来监听 onload 合不合理要分场景来说
如果 img 生命周期很短，比如说封装的工具函数，直接 create 一个 img ，在 onload 里面获取 blob 或者尺寸信息，这时候会不会被覆盖是可控的，个人认为也可以视作“小而美”的
但是如果生命周期比较长，emmmm ，那不好说
，有可能写出来的逻辑都不能符合预期，副作用这东西，要多讨厌有多讨厌