【JS技巧】用AbortController 取消事件监听

传统的事件监听和取消事件监听

    <button>点击按钮</button>
    <script>
        const element = document.querySelector('button');
        function handleClick() { console.log('Clicked!'); }
        element.addEventListener('click', handleClick);
        // 需要手动移除
        element.removeEventListener('click', handleClick);
    </script>

用AbortController 取消事件监听

    const controller = new AbortController();
    element.addEventListener('click', handleClick, { signal: controller.signal });
    // 调用 abort 即可取消所有绑定到该 signal 的事件
    controller.abort();

优点

如果有多个事件，在某些场景（组件销毁时）要单独移除，管理复杂。AbortController 可以这样做：

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }
    </style>
    <button>点击按钮</button>
    <div></div>
    <script>
        const element1 = document.querySelector('button');
        const element2 = document.querySelector('div');
        const handleClick = () => {
            console.log('click');
        }
        const handleMouseOver = () => {
            console.log('mouseover');
        }
        const controller = new AbortController();

        // 绑定多个事件
        element1.addEventListener('click', handleClick, { signal: controller.signal });
        element2.addEventListener('mouseover', handleMouseOver, { signal: controller.signal });
        // 一次取消所有
        controller.abort();
    </script>

可以一次取消多个监听。

AbortController其他用法

终止异步任务

const controller = new AbortController();

fetch('https://example.com', { signal: controller.signal })
  .then(response => response.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted!');
    }
  });

// 取消请求
controller.abort();

MDN链接