Użycie dwa razy addEventListener scroll. JS

Question

Hejka.

Wymyśliłem coś takiego:

window.addEventListener('scroll', runAnimationRun);
var h = (Math.max(document.documentElement.clientHeight, window.innerHeight || 0)/1.5);
function runAnimationRun(){
    if (document.body.scrollTop > h || document.documentElement.scrollTop > h) {
        addShadows();
        showSpeechBubbles();   
        setInterval(showSpeechBubbles, 25000);
        window.removeEventListener('scroll', runAnimationRun);
    }
}
window.addEventListener('scroll', function showMeTop(){
    if (document.body.scrollTop > h || document.documentElement.scrollTop > h) {
        showButtonUp();
         window.removeEventListener('scroll', runAnimationRun);
    }
    else {
        hideButtonUp();
    }
});

 

Podświadomie czuję, że takie rozwiązanie jest na bakier wydajnością, ale nie wiem jak do tego inaczej podejść.

Jeden addEventListener('scroll') odpowiada za jednorazowe uruchomienie animacji i wyłączenie się. Drugi włącza i wyłącza button scroll up na odpowiedniej wysokości strony. 

Comments

Po pierwsze:

window.addEventListener('scroll', function showMeTop(){

Albo robisz funkcję anonimową, albo podajesz do niej referencję. Przekazanie nazwanej funkcji (mam na myśli showMeTop), ale jednak tworzonej w locie ma sens, gdy z wewnątrz niej chcesz ją jeszcze raz wywołać (patrz na IIFE, które mogą być nazwane i dlatego ze środka możesz je jeszcze raz wywołać, bo inaczej IIFE więcej niż raz nie wywołasz).

Jeśli ten warunek jest w obu listenerach:

    if (document.body.scrollTop > h || document.documentElement.scrollTop > h) {

, to dlaczego nie zrobisz tego w jednym i dobrze nie pokierujesz całości if'ami?

---

Dzięki, Do pierwszego zalecenia się zastosuję.

Odpowiadając na drugie pytanie - w pierwszym jest wyłączenie listenera: removeEventListener('scroll', runAnimationRun) (teraz zauważyłem że jest też w drugim, ale to przez pomyłkę), gdy go wyłączę warunek przestanie być sprawdzany.

W drugim listenerze ten warunek sprawdza poruszanie się po stronie cały czas.

---

A może zrób jednego listenera z flagą, która przestawi się gdy ma nastąpić ta jednokrotna animacja i wyłączenie się (wtedy przestaw flagę) i potem będzie lecieć tylko drugi warunek?

---

Przepraszam cię, ale jestem początkujący i nie wiem jak się za to zabrać.  Masz może jakiś link do przeczytania o tym?

---

var initialScroll = true;
var h = (Math.max(document.documentElement.clientHeight, window.innerHeight || 0)/1.5);

window.addEventListener('scroll', function(ev) {
    if (document.body.scrollTop > h || document.documentElement.scrollTop > h) {
        if (initialScroll) {
            addShadows();
            showSpeechBubbles();   
            setInterval(showSpeechBubbles, 25000);
            initialScroll = false;
       } else {
           showButtonUp();
       }
    } else {
       hideButtonUp();
    }
});

Coś w ten deseń.