使用 AbortSignal 移除事件监听器

jwj

发布于 2023-03-24 10:43:02

1.5K1

发布于 2023-03-24 10:43:02

现在有个需求，弹窗打开时，监听窗口大小变化，并动态调整弹窗大小，避免弹窗比窗口还大，导致弹窗无法操作。弹窗关闭后，移除监听 resize。因为执行时需要有参数，所以 removeEventListener 并不是很适用。

最初想法是使用 addEventListener 和 removeEventListener 来完成需求。

layer.open({
  type: 2,
  title: '详情',
  area: ['85%', '85%'],
  maxmin: true,
  content: "/detail.html?id=123",
  // 弹窗关闭
  end: function () {
    window.removeEventListener("resize", (e) => layer.full(index));
  },
  // 弹窗打开
  success: function (layero, index) {
    layer.full(index);
    window.addEventListener("resize", (e) => layer.full(index));
  }
});

但发现能正常添加监听器，但是不能正常移除。

于是仔细查看了 removeEventListener 的文档，发现了 AbortSignal。

改改，使用 AbortSignal 完美实现了需求。

layer.open({
  type: 2,
  title: '详情',
  area: ['85%', '85%'],
  maxmin: true,
  content: "/detail.html?id=123",
  // 弹窗关闭
  end: function () {
    // 发出信号，可以移除监听器了
    controller.abort();
  },
  // 弹窗打开
  success: function (layero, index) {
    layer.full(index);
    window.addEventListener("resize", (e) => layer.full(index), {signal: controller.signal});
  }
});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-03-222，如有侵权请联系 cloudcommunity@tencent.com 删除

addeventlistener