• 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?

+1 głos
107 wizyt
pytanie zadane 21 września w JavaScript przez Doge Gaduła (3,110 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

+1 głos
odpowiedź 21 września przez ScriptyChris Mędrzec (183,720 p.)

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
    }
  });

 

0 głosów
odpowiedź 22 września przez VBService Mędrzec (186,940 p.)
edycja 22 września 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 przez Comandeer Guru (573,240 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 przez VBService Mędrzec (186,940 p.)
edycja 23 września 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 przez Comandeer Guru (573,240 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ź 170 wizyt
pytanie zadane 25 sierpnia 2018 w C i C++ przez Hiskiel Pasjonat (22,850 p.)
0 głosów
0 odpowiedzi 71 wizyt
0 głosów
1 odpowiedź 228 wizyt

89,128 zapytań

137,729 odpowiedzi

307,727 komentarzy

59,180 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...