Jednorazowe wykonanie sie funkcji w js

Question

Mam funkcję , która zmienia właściwości css ,elementu html. Wywoływana jest na $(window).scroll. Chcę aby po jednorazowym wykonaniu sie , zakończyła swoje działanie. Żeby na scrollowanie  ponownie sie nie wywoływała. Jest cos takiego wykonalne? Ktoś pomoże? Z góry dzięki

Answer 1

Jest coś takiego jak $.fn.one, czyli wywołanie danego event listenera raz, po czym odpięcie go. To samo można osiągnąć przy pomocy opcji once dla addEventListener.

Answer 2

Możesz zrobić np tak, lepiej niż ustawiać niepotrzebnego globala:
 

function oneTime () {
  if (oneTime.done) {
    return
  }

  oneTime.done = true
  // do main stuff, for example
  console.log('doing stuff')
}

 

Chociaż w Twoim przypadku lepiej po prostu usunąć podpięty event listener - no bo po co ma się ta funkcja w ogóle odpalać i sprawdzać warunek?

Comments

Też dobre, i tak i tak se zrobie dla treningu. Wielkie dzięki

Answer 3

Ustaw warunek.
1. Zmienna globalna typu boolean (przy deklaracji przyjmuje wartość true)
2. W ciele funkcji ustaw zmianę własności CSS w warunku gdzie jest sprawdzana zmienna z pkt.1.
3. Po zmianie własności zmień tą zmienna globalną na false.
4. Zmiana nie wywoła się ponownie, bo false.

Mam nadzieję że to w miarę jasno wyjaśniłem :)

Comments

Zajebiste dzieki , wszystko jasne. Już coś takiego widziałem kiedyś ale se o tym zapomniałem. Jeszcze raz dzięki

---

Zmienna globalna typu boolean

hmm, lepiej unikać zmiennych globalnych. Wg mnie lepszy jest sposób Comandeer'a i wywołanie:

element.addEventListener( 'scroll', () => {
    //funkcja na scroll
}, { once: true } );

 

---

Dzięki, ale czy mógłbyś (jak Ci sie oczywiscie chce) troszke bardziej pojaśnić ten kawałek kodu? Nie bardzo go rozumiem...

---

(1) element.addEventListener( 
(2)   'scroll', 
(3)    () => {
(4)        //funkcja na scroll
(5)    }, 
(6)    { once: true } 
(7) );

1 - pod element DOM podpinamy...

2 - ...zdarzenie "scroll" (scroll, nigdy onscroll !)

3, 4, 5 - tutaj jest funkcja wywoływana na to zdarzenie

6 - ustawiamy opcje dla addEventListener, tutaj akurat tylko once, co oznacza, że zdarzenie zostanie obsłużone tylko raz, a potem zostanie odpięte od "element". Jest to inne spojrzenie na Twój problem. Nie chodzi tu o jednokrotne wywołanie funkcji ale o jednokrotne obsłużenie zdarzenia. Jest to lepsze rozwiązanie, ponieważ za chwilę możesz stwierdzić, że ta sama funkcja może zostać przypięta do dwóch różnych elementów i dla każdego z nich ma być wywołana tylko raz. Jeśli zastosujesz metodę ze zmienną globalną to każde kolejne wywołanie funkcji nie spowoduje miany CSS, bo już raz została ona wywołana, na co wskazuje zmienna = np. false. W tej metodzie (addEventListener once) jeśli podepniesz funkcję X do dwóch różnych elementów i w obu wypadkach dasz opcję one:true to dla każdego z nich wywoła się tylko raz (a dokładniej zdarzenie będzie wywołane tylko raz). I co więcej, masz możliwość np. dla elementu X wywołania jeden raz (once:true), ale dla elementu Y wywoływanie wielokrotne (once:false - wartość domyślna).

7 - nawias kończący addEventListener (jak już ponumerowałem to opiszę :P)

Nie wiem czy wystarczająco jasno opisałem o co mi chodziło, w razie czego daj znać to ujmę to jakoś inaczej :)