Question

如果我订阅了window.onresize（在单页应用程序中），我是否需要取消订阅才能避免内存泄漏？如果是这样，我该怎么做？

<script type="text/javascript">
  var heightOutput = document.querySelector('#height');
  var widthOutput = document.querySelector('#width');

  function resize() { 
    heightOutput.textContent = window.innerHeight;
    widthOutput.textContent = window.innerWidth;
  }

  window.onresize = resize;
</script>

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

Answer 1

要取消订阅，您可以使用：

// Subscribe
window.onresize = resize;

// Unsubscribe
window.onresize = null;

此方法仅允许您在resize上提供一个函数。

或者，您可以使用：

// Subscribe
window.addEventListener("resize", resize);

// Unsubscribe
window.removeEventListener("resize", resize);

使用此方法，您可以将多个事件侦听器附加到同一事件。但 do 必须保留对您附加的方法的引用，以便能够将其删除。

不处理对事件的订阅不一定会造成内存泄漏。例如，当您使用<button>事件订阅创建click时，一旦从DOM中删除<button>且代码中没有引用，订阅将被删除。（至少在现代浏览器中）

但是，对处理订阅和删除不需要的侦听器的方式进行额外考虑总是很好。

Answer 2

关于内存泄漏：

虽然过去常常对内存泄漏和DOM有一些担忧，但据我所知，现代浏览器不再有问题了。

（过去主要是IE问题。）

如果您对了解导致它们的原因感兴趣，我发现了对DOM内存泄漏的讨论 - 但同样，在今天的工作中，我不会太担心。

http://javascript.info/tutorial/memory-leaks

使用resize事件，我希望你只会将它附加一次 - 并且只有一个window对象，所以我不会再想一想。

销毁window.onresize事件订阅者

2 个答案: