Verwenden von AbortController als Alternative zum Entfernen von Ereignishörern

Seit seiner Einführung im Jahr 2017 hat AbortController einen leistungsstarken Mechanismus für die Absage fetch() -Anfragen bereitgestellt. Diese Fähigkeit geht über einfache API-Aufrufe hinaus und bietet elegante Lösungen für die Verwaltung von Ereignishörern, insbesondere in Szenarien wie Drag-and-Drop-Interaktionen.

Ein unkompliziertes Beispiel zeigt, dass das Abbrechen einer fetch() -Anforderung storniert:

 const Controller = new abortController ();
const res = fetch ('/', {signal: Controller.Signal});
Controller.abort ();
console.log (res); // => Versprechen (abgelehnt): "Domexception: Der Benutzer hat eine Anfrage abgebrochen"

AbortController verbessert auch die Zeitüberschreitung und bietet eine sauberere Alternative zu setTimeout :

 Funktion Timeout (Dauer, Signal) {
  Neues Versprechen zurückgeben ((Resolve, ablehnen) => {
    const handle = setTimeout (Auflösung, Dauer);
    Signal?
      Clearimeout (Handle);
      ablehnen (neuer Fehler ('abgebrochen');
    });
  });
}

// Verwendung
const Controller = new abortController ();
const Promise = Timeout (10000, Controller.Signal);
Controller.abort ();
console.log (versprechen); // => Versprechen (abgelehnt): "Fehler: Abgebildet"

Der signifikante Fortschritt liegt jedoch in der Unterstützung von Chrome 88 für AbortSignal innerhalb addEventListener . Dies ermöglicht einen optimierten Ansatz, um mehrere Ereignishörer gleichzeitig zu entfernen und die Notwendigkeit mehrerer Aufrufe removeEventListener zu ersetzen.

Betrachten Sie ein Beispiel zum Drag-and-Drop-Beispiel. Zuvor erforderte die Verwaltung mousedown , mousemove und mouseup -Ereignissen explizite Entfernung mit removeEventListener :

 // mit REMEDEVENTLISTENER mithilfe von REMEDEVENTLISTENER
el.addeventListener ('MouseDown', e => {
  if (e.buttons! == 1) return;

  const onmousemove = e => {
    if (e.buttons! == 1) return;
    /* arbeiten */
  };

  const onmouseUp = e => {
    if (e.buttons & 1) return;
    window.removeEventListener ('Mousemove', onmousemove);
    window.removeEventListener ('mauseup', onmouseUp);
  };

  window.addeventListener ('Mousemove', onmousemove);
  window.adDeVentListener ('mauseup', onmouseUp);
});

Mit AbortController entfernt ein einzelner abort() alle zugehörigen Zuhörer sauber:

 // mit AbortController verwenden
el.addeventListener ('MouseDown', e => {
  if (e.buttons! == 1) return;

  const Controller = new abortController ();

  window.addeventListener ('Mousemove', e => {
    if (e.buttons! == 1) return;
    /* arbeiten */
  }, {Signal: Controller.Signal});

  window.adDeVentListener ('mauseup', e => {
    if (e.buttons & 1) return;
    Controller.abort ();
  }, {Signal: Controller.Signal});
});

Derzeit unterstützt nur Chrome 88 diese AbortSignal -Integration mit addEventListener . Während andere Browser AbortController unterstützen, ist diese spezifische Funktion noch nicht weit verbreitet. Für eine breitere Kompatibilität ist eine Polyfill erhältlich.

Das obige ist der detaillierte Inhalt vonVerwenden von AbortController als Alternative zum Entfernen von Ereignishörern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!