销毁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>带有事件订阅的订阅时，一旦从 DOM 中删除并且代码中没有引用，click订阅就会被删除。<button>（至少在现代浏览器中）

尽管如此，对处理订阅的方式进行一些额外的思考并删除不需要的侦听器总是好的。