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

Question

我有一个 <input type='file'/> 到 select 的组件，并将图像上传到我的存储桶。

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

From: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

这运行每次用户 select 一个文件。我正在计算一个 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 次。

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

Answer 1

不，没有必要。最终，reader 和函数将只相互引用¹，但没有其他任何东西会引用它们中的任何一个，因此它们都可以被垃圾收集。

¹ 如果 JavaScript 引擎优化了这些闭包（很多人都这样做），那么只有 reader 有对函数的引用，而不是相反，你编写它们的方式.

Answer 2

在您当前的示例中 -

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

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

但是在一般情况下我会说是，你应该关心listeners这是可能的内存泄漏问题的最佳实践。

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

Do I need to remove event listeners for FileReader() after I'm done with it?

javascript

filereader