Question

我有一个带有<input type='file'/>的组件，可以选择图像并将其上传到我的存储桶。

我正在使用FileReader().readAsText(file);，它是异步的，并且设置为监听onload和onerror事件的监听器。

发件人： https://developer.mozilla.org/en-US/docs/Web/API/FileReader

使用addEventListener（）或通过将事件侦听器分配给此接口的oneventname属性来监听这些事件。

这在用户每次选择文件时运行。我正在计算一个md5哈希，以用作存储中的fileName。

if (newFile !== undefined && newFile !== null) {
  md5Hash = await new Promise((resolve,reject) => {

    const reader = new FileReader();

    reader.onload = (event) => {
      console.log('md5 calculated!');
      const binary = event.target.result;
      resolve(md5(binary));
    };

    reader.onerror = (event) => {
      reject(event.target.result);
    };

    reader.readAsText(newFile);

  });
}

使用完这些监听器后，是否需要麻烦删除它们？这是一个好习惯还是没有意义？

对于我在同一页面上载的不同图片，该代码可能会运行5或6次。

注意：：这是一个页面，用于添加BlogPost和帖子的图像。

Answer 1

不，没有必要。最终，阅读器和函数将只能相互引用¹，而其他都不会对它们中的任何一个进行引用，因此它们都可以被垃圾回收。

¹而且，如果JavaScript引擎优化了这些闭包（许多人都这样做了），则只有reader会引用这些函数，而不是您编写它们的方式。

Answer 2

在您当前的示例中-

为什么要关心listeners，因为它会导致内存泄漏

我会说否，实际上，您不需要删除listener中定义的Promise callback fn并在执行fn时删除它，JavaScript Engine创建执行上下文并定义其环境变量，然后分配内存。一旦您的fn被执行并从callstack中删除（作为对内存中位置的引用），垃圾收集器将释放该内存，该内存也仅限于fn，以便在{{1} }执行。

但是，在一般情况下，我会说是，您应该注意fn，这是可能的内存泄漏问题的最佳实践。

完成后，是否需要删除FileReader（）的事件侦听器？

2 个答案: