イベントリスナーを削除するための代替として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 = setimeout（resolve、duration）;
    Signal？..AddeventListener（ 'Abort'、（）=> {
      ClearTimeOut（ハンドル）;
      拒否（新しいエラー（ 'Aborted'））;
    }）;
  }）;
}

// 使用法
const Controller = new AbortController（）;
const promise = timeout（10000、controller.signal）;
controller.abort（）;
console.log（Promise）; // =>約束（拒否）：「エラー：中止」

しかし、重要な進歩は、 addEventListener内のAbortSignalに対するChrome 88のサポートにあります。これにより、複数のイベントリスナーを同時に削除するための合理化されたアプローチが可能になり、複数のremoveEventListenerコールが必要になります。

ドラッグアンドドロップの例を考えてみましょう。以前は、 mousedown 、 mousemove 、およびmouseupイベントの管理には、 removeEventListenerを使用した明示的な除去が必要でした。

 // removeEventListenerを使用します
el.AddeventListener（ 'Mousedown'、e => {
  if（e.buttons！== 1）return;

  const onmousemove = e => {
    if（e.buttons！== 1）return;
    /* 仕事 */
  };

  const onmouseup = e => {
    if（e.buttons＆1）return;
    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）return;

  const Controller = new AbortController（）;

  window.addeventlistener（ 'mousemove'、e => {
    if（e.buttons！== 1）return;
    /* 仕事 */
  }、{signal：controller.signal}）;

  window.addeventlistener（ 'mouseup'、e => {
    if（e.buttons＆1）return;
    controller.abort（）;
  }、{signal：controller.signal}）;
}）;

現在、Chrome 88のみがaddEventListenerとのこのAbortSignal統合を完全にサポートしています。他のブラウザはAbortControllerをサポートしていますが、この特定の機能はまだ広く実装されていません。より幅広い互換性のために、ポリフィルを利用できます。

以上がイベントリスナーを削除するための代替としてAbortControllerを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。