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

Użycie dwa razy addEventListener scroll. JS

0 głosów
92 wizyt
pytanie zadane 11 lutego 2017 w JavaScript, jQuery, AJAX przez mowmiheniek Stary wyjadacz (11,920 p.)

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. 

komentarz 12 lutego 2017 przez JSHolic Szeryf (79,520 p.)

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?

komentarz 12 lutego 2017 przez mowmiheniek Stary wyjadacz (11,920 p.)
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.
komentarz 13 lutego 2017 przez JSHolic Szeryf (79,520 p.)
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?
komentarz 13 lutego 2017 przez mowmiheniek Stary wyjadacz (11,920 p.)
Przepraszam cię, ale jestem początkujący i nie wiem jak się za to zabrać.  Masz może jakiś link do przeczytania o tym?
1
komentarz 15 lutego 2017 przez JSHolic Szeryf (79,520 p.)
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ń.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 107 wizyt
0 głosów
1 odpowiedź 195 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript, jQuery, AJAX przez Wisien Nowicjusz (170 p.)
0 głosów
1 odpowiedź 73 wizyt
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

65,676 zapytań

112,313 odpowiedzi

237,031 komentarzy

46,653 pasjonatów

Przeglądających: 138
Pasjonatów: 2 Gości: 136

Motyw:

Akcja Pajacyk

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

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

...