Utiliser AbortController comme alternative pour supprimer les auditeurs d'événements

Depuis son introduction en 2017, AbortController a fourni un mécanisme puissant pour annuler les demandes fetch() . Cette capacité s'étend au-delà des appels d'API simples, offrant des solutions élégantes pour gérer les auditeurs d'événements, en particulier dans des scénarios tels que les interactions glisser-déposer.

Un exemple simple montre l'annulation d'une demande fetch() :

 const Controller = new AbortController ();
const res = fetch ('/', {signal: contrôleur.signal});
contrôleur.Abort ();
console.log (res); // => Promise (rejeté): "Domexception: l'utilisateur a abandonné une demande"

AbortController améliore également la manipulation du délai d'expiration, offrant une alternative plus propre à setTimeout :

 Timeout de fonction (durée, signal) {
  retourner la nouvelle promesse ((résoudre, rejeter) => {
    const handle = setTimeout (résolution, durée);
    Signal? .AddeventListener ('Abort', () => {
      ClearTimeout (manche);
      rejeter (nouvelle erreur («about»));
    });
  });
}

// utilisation
const Controller = new AbortController ();
const promest = timeout (10000, Controller.Signal);
contrôleur.Abort ();
console.log (promesse); // => promesse (rejeté): "Erreur: abandonné"

L'avancement significatif, cependant, réside dans le soutien de Chrome 88 à AbortSignal dans addEventListener . Cela permet une approche rationalisée pour supprimer simultanément plusieurs écouteurs d'événements, en remplaçant le besoin de plusieurs appels de removeEventListener .

Considérez un exemple de glisser-déposer. Auparavant, la gestion des événements mousedown , mousemove et mouseup a nécessité une suppression explicite à l'aide de removeEventListener :

 // Utilisation de SupporEventListener
el.addeventListener ('Mousedown', e => {
  if (e.buttons! == 1) return;

  const OnMouseMove = E => {
    if (e.buttons! == 1) return;
    /* travail */
  };

  const onMouseup = e => {
    if (e.buttons & 1) retour;
    Window.removeeventListener («MouseMove», OnMouseMove);
    Window.RemoveEventListener («MouseUp», OnMouseUp);
  };

  Window.AddeventListener («MouseMove», OnMouseMove);
  window.addeventListener ('mouseup', onMouseUp);
});

Avec AbortController , un seul appel abort() supprime proprement tous les auditeurs associés:

 // Utilisation d'AbortController
el.addeventListener ('Mousedown', e => {
  if (e.buttons! == 1) return;

  const Controller = new AbortController ();

  window.addeventListener ('MouseMove', e => {
    if (e.buttons! == 1) return;
    /* travail */
  }, {signal: contrôleur.signal});

  window.addeventListener ('mouseup', e => {
    if (e.buttons & 1) retour;
    contrôleur.Abort ();
  }, {signal: contrôleur.signal});
});

Actuellement, seul Chrome 88 prend en charge entièrement cette intégration AbortSignal avec addEventListener . Alors que d'autres navigateurs prennent en charge AbortController , cette fonctionnalité spécifique n'est pas encore largement implémentée. Un polyfill est disponible pour une compatibilité plus large.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!