javascript - 销毁window.onresize事件订阅者

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);

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

不处理事件订阅不一定会导致内存泄漏。例如，当您创建 <button>与 click事件订阅，一旦<button>将被删除订阅已从 DOM 中删除并且在代码中没有任何引用。 (至少在现代浏览器中)

不过，在处理订阅的方式上多加考虑并删除不需要的监听器总是好的。