• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

W jaki sposób to zapisać? Czy da się w ogóle?

VPS Starter Arubacloud
+1 głos
440 wizyt
pytanie zadane 21 września 2022 w JavaScript przez Doge Gaduła (3,420 p.)

Witam, czy da się zrobić funkcję

    document.querySelector('body').addEventListener('click', e => {
        closest = e.target.closest(".menu, .menu-btn");
        if(!closest) close_menu();
    });

tak, aby móc ją później usunąć? Ponieważ teraz jest anonimowa i nie da się jej usunąć.

2 odpowiedzi

+2 głosów
odpowiedź 21 września 2022 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 27 października 2022 przez Doge
 
Najlepsza

Jeśli chcesz, aby event listener wykonał się tylko raz, to możesz użyć opcji { once: true }. W przeciwnym razie musisz mieć referencję do callbacka, czyli go nazwać, żeby go przekazać do removeEventListener.

Na przykład:

document
  .querySelector('body')
  .addEventListener('click', function onBodyClick(e) /* funkcja nazwana */ {
    closest = e.target.closest(".menu, .menu-btn");
    if(!closest) close_menu();

    if (someConditionHere) { // na jakiś warunek
      e.currentTarget.removeEventListener('click', onBodyClick); // usuń listener
    }
  });

 

+1 głos
odpowiedź 22 września 2022 przez VBService Ekspert (255,320 p.)
edycja 22 września 2022 przez VBService

Anonimowy EventListener można "usunąć" też za pomocą: AbortController.abort() i trzeciego parametru o nazwie signal

addEventListener(type, listener, options = {signal})

signal Optional

An AbortSignal. The listener will be removed when the given AbortSignal object's abort() method is called. If not specified, no AbortSignal is associated with the listener.

 

 

przykład

<body data-counter="0"></body>
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  transition: background 400ms;
}
body:active {
  background-color: gray;
}
body:before {
  position: absolute;
  top: 1em;
  left: 1em;
  content: attr(data-counter);
  font: 700 1em/1.1 system-ui;
}
let i=0;
const controller = new AbortController();

document.querySelector('body').addEventListener('click', _=> {
  document.body.dataset.counter = ++i;

  // remove listener gdy "i" osiągnie wartość większą od 9
  if (i > 9) controller.abort();
}, {signal: controller.signal});

 

1
komentarz 23 września 2022 przez Comandeer Guru (604,020 p.)

Można, ale AbortController nie służy do tego typu rzeczy. Został zaprojektowany w celu kontrolowania operacji asynchronicznych, np. przerwanie fetch(), gdy z jakiegoś powodu już nie potrzebujemy tych danych. W przypadku event listenerów głównym use case'em jest raczej odpinanie wielu listenerów naraz albo właśnie odpinanie ich na podstawie jakichś zmian w innych częściach aplikacji (np. wystąpił błąd gdzieś wyżej, więc odpinamy listenery, żeby nie generować więcej problemów).

komentarz 23 września 2022 przez VBService Ekspert (255,320 p.)
edycja 23 września 2022 przez VBService

Można, ale AbortController nie służy do tego typu rzeczy. 

Ja tu żadnego koła na nowo nie wynajduje skoro dokumentacja podaje taki przykład.

This example demonstrates how to add an addEventListener() that can be aborted with an AbortSignal.

 


Using AbortController as an Alternative for Removing Event Listeners

Aborting event listeners in vanilla JS

 

Benefits

This may seem more verbose, but it has a couple of benefits:

  1. You can remove multiple event listeners at once. Just associate them all with the same AbortSignal.
  2. You can remove anonymous event listeners. The .removeEventListener() method only works with named functions.

 

Browser support

 

The AbortController interface has been around for a little while. However, the options.signal property is very new to the .addEventListener() method.

 

Can I use: AbortController

1
komentarz 23 września 2022 przez Comandeer Guru (604,020 p.)

Ta sama dokumentacja dla samego AbortController podaje to:

The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

Co wskazywałoby na to, że nie jest to wszystko do końca dopracowane.

Specyfikacja pokazuje przykład użycia AbortControllera o wiele bardziej zbliżony do tego, o czym mówiłem: jakaś asynchroniczna akcja kontrolowana z zewnątrz.

I tak też jest to najczęściej wykorzystywane:

Podobne pytania

0 głosów
1 odpowiedź 333 wizyt
pytanie zadane 25 sierpnia 2018 w C i C++ przez Hiskiel Pasjonat (22,830 p.)
0 głosów
0 odpowiedzi 121 wizyt
0 głosów
1 odpowiedź 567 wizyt

92,781 zapytań

141,708 odpowiedzi

320,588 komentarzy

62,114 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...