基于 AbortController 移除事件监听

记录一下，今天学到的基于 AbortController 移除事件监听。

经典方法

EventTarget.removeEventListener()

把当初绑定事件的回调函数引用传给 removeEventListener 就可以移除事件监听。

这应该是最常见的处理方式了，缺点我觉得有两个：

1. 一下子移除多个事件有点麻烦，比如需要移除 5 个事件，要调用 5 次 removeEventListener。

2. addEventListener 的时候不能愉快地使用箭头函数了，因为为了保持函数引用，通常要单独定义回调函数。

基于 AbortController 的方法

addEventListener 注意看第三个参数 options 对象的 signal，该属性接受 AbortSignal。当 AbortSignal.abort() 方法调用时，监听器会被移除。

const controller = new AbortController();

window.addEventListener('resize', listener, { signal: controller.signal });

controller.abort();

AbortController 的常规用法

举个常规的取消请求的例子：

const controller = new AbortController();
const signal = controller.signal;

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});