使用abortcontroller作為刪除活動聽眾的替代方案

自2017年推出以來， AbortController提供了一種取消fetch()請求的強大機制。該功能超出了簡單的API調用，提供了用於管理活動聽眾的優雅解決方案，尤其是在諸如拖放互動之類的場景中。

一個簡單的示例演示了取消fetch()請求：

 const Controller = new AbortController（）;
const res = fetch（'/'，{signal：controller.signal}）;
controller.abort（）;
console.log（res）; // =>承諾（被拒絕）：“ domexception：用戶中止請求”

AbortController還改善了超時處理，為setTimeout提供了更清潔的替代方法：

功能超時（持續時間，信號）{
  返回新的承諾（（分辨率，拒絕）=> {
    const handle = settimeout（解析，持續時間）;
    訊號? .addeventListener（'abort'，（）=> {
      cleartimeout（handle）;
      拒絕（新錯誤（“流產”））;
    }）;
  }）;
}

// 用法
const Controller = new AbortController（）;
const Promise =超時（10000，Controller.Signal）;
controller.abort（）;
console.log（Promise）; // =>承諾（被拒絕）：“錯誤：中止”

然而，重大進步在於Chrome 88對addEventListener中AbortSignal的支持。這允許一種簡化的方法同時刪除多個事件偵聽器，從而取代了多個removeEventListener調用的需求。

考慮一個拖放示例。以前，管理mousedown ， mousemove和mouseup事件需要使用removeEventListener明確刪除：

 //使用RemoveEventListener
el.AddeventListener（'Mousedown'，e => {
  if（e.buttons！== 1）返回;

  const onMouseMove = e => {
    if（e.buttons！== 1）返回;
    /* 工作 */
  };

  const onMouseUp = e => {
    if（E.Buttons＆1）返回；
    Window.RemoveEventListener（'Mousemove'，OnMouseMove）;
    window.removeEventListener（'MouseUp'，onMouseUp）;
  };

  Window.AddeventListener（'Mousemove'，OnMouseMove）;
  Window.AddeventListener（'MouseUp'，onMouseUp）;
}）;

使用AbortController ，一個abort()呼叫可干淨地刪除所有相關的聽眾：

 //使用abortcontroller
el.AddeventListener（'Mousedown'，e => {
  if（e.buttons！== 1）返回;

  const Controller = new AbortController（）;

  window.addeventlistener（'Mousemove'，e => {
    if（e.buttons！== 1）返回;
    /* 工作 */
  }，{信號：controller.signal}）;

  window.addeventListener（'MouseUp'，e => {
    if（E.Buttons＆1）返回；
    controller.abort（）;
  }，{信號：controller.signal}）;
}）;

目前，只有Chrome 88完全支持與addEventListener AbortSignal集成。雖然其他瀏覽器支持AbortController ，但此特定功能尚未廣泛實現。多填充可用於更廣泛的兼容性。

以上是使用abortcontroller作為刪除活動聽眾的替代方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！