完成后是否需要删除 FileReader() 的事件侦听器？答案

【问题标题】：Do I need to remove event listeners for FileReader() after I'm done with it?完成后是否需要删除 FileReader() 的事件侦听器？
【发布时间】：2019-06-07 16:00:36
【问题描述】：

我有一个带有<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 次。

注意：这是一个添加博客帖子和帖子图片的页面。

【问题讨论】：

标签： javascript filereader

【解决方案1】：

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

¹ 如果 JavaScript 引擎优化了这些闭包（很多人都会这样做），那么只有 reader 引用了这些函数，而不是反过来，也就是您编写它们的方式。

【讨论】：

哇！！这是一个简短的好答案。

【解决方案2】：

在您当前的示例中 -

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

我会说不，您实际上不需要删除listener，因为它在您的Promise callback fn 中定义，当fn 被执行时，JavaScript 引擎会创建一个执行上下文并定义它的环境变量然后分配内存。一旦你的fn 被执行并从callstack 中删除，该内存就会被垃圾收集器释放，因为对内存中位置的引用也仅限于fn，以便在你的fn 执行后被清理。

但是，一般情况下我会说是的，您应该关心listeners，这是解决可能的内存泄漏问题的最佳做法。

【讨论】：