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

Do sprawdzenia kod JavaScript.

VPS Starter Arubacloud
0 głosów
275 wizyt
pytanie zadane 19 stycznia 2017 w JavaScript przez mowmiheniek Stary wyjadacz (11,900 p.)

Witam,

Dopiero się uczę JS i bardzo bym prosił o wskazówki dotyczące mojego kodu. Używam czystego JS bez jQuery. 

Kod powoduje pojawienie się animacji po przewinięciu pierwszej sekcji w dół o 100vh. Dodaje klasy i usuwa z poszczególnych tagów. Kod działa poprawnie.

Czy można było lepiej go napisać? Na co zwracać uwagę.

 

 

// ........................ scroll run animation ...................
window.onscroll = function() {runAnimationRun()};
function runAnimationRun(){
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    if (document.body.scrollTop > h || document.documentElement.scrollTop > h) {
        addShadows();
    }
}

// ......................... pointers and shadows...................
function addShadows() {
    document.getElementById('pointer1').classList.add('pointer-down1');
    document.getElementById('pointerShadow1').classList.add('pointer-down1');
    document.getElementById('pointer2').classList.add('pointer-down2');
    document.getElementById('pointerShadow2').classList.add('pointer-down2');
    document.getElementById('pointer3').classList.add('pointer-down3');
    document.getElementById('pointerShadow3').classList.add('pointer-down3');
    document.getElementById('pointer4').classList.add('pointer-down4');
    document.getElementById('pointerShadow4').classList.add('pointer-down4');
    document.getElementById('pointer5').classList.add('pointer-down5');
    document.getElementById('pointerShadow5').classList.add('pointer-down5');
    var shadows = document.getElementsByClassName('fade-in');
    for(var i=0; i < shadows.length; i++) {
        shadows[i].classList.add('shadow-on');
    }
}
// ...................... Speech bubbles ..................
function showSpeechBubbles() {
    let arrWindows= document.getElementsByClassName("windows");
    var timeout = 4000;
    for (let i=0; i<arrWindows.length;  i++) {
            setTimeout( function windowin(){
                arrWindows[i].className += " showing";
            }, timeout);
            var timeout = timeout+4000;
            setTimeout( function windowout(){
                arrWindows[i].classList.remove("showing");
            }, timeout);
    }
}
showSpeechBubbles();
setInterval("showSpeechBubbles()", 20000);

 

1
komentarz 19 stycznia 2017 przez niezalogowany

Używam czystego JS bez jQuery. 

yes

komentarz 19 stycznia 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)
Nawet nie wiesz jak trudno znaleźć podpowiedzi i rozwiązania problemów w czystym JS. W większości poradników pakują jQuery. Nawet w prostych rozwiązaniach.
komentarz 20 stycznia 2017 przez mtk3d Nałogowiec (46,690 p.)
To dlaczego nie używasz jQuery? Pisząc w nim, kod jest dużo bardziej przejrzysty, a jQuery dużo nie waży.
1
komentarz 20 stycznia 2017 przez Comandeer Guru (599,730 p.)

jQuery dużo nie waży.

No tak, w końcu Angular waży 800KB, to takie jQuery – cóż to jest…

 To dlaczego nie używasz jQuery?

A to jakiś przymus? Kod z jQuery wcale nie musi być czytelniejszy. Poza tym warto wiedzieć jak się to robi normalnie, bo jQuery tak dobrze obudowuje DOM, że można go używać nie rozumiejąc co to DOM. 

2 odpowiedzi

+3 głosów
odpowiedź 20 stycznia 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)
Super, że używasz JS.  A jeśli szukasz rozwiązań np.  Na stackoverflow to dopisz pure JS. Taka mała rada. Co do kodu,  to zawsze można coś napisać lepiej.

Np.  Zamiast window.onscroll dasz addEventListener. A funkcja addShadows może przyjąć argumenty,  id elementu,  na którym pracujesz i klasę,  którą nadajesz. Wtedy taką funkcję możesz wywołać na tablicy elementów,  czy czymś podobnym.  Masz wtedy przenośną funkcję skoro używasz classlist,  to rób to wszędzie.  Konsekwencją przede wszystkim.  Nad resztą wypowie się pewnie ktoś z większym doświadczeniem.
komentarz 20 stycznia 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)
Dzięki za rady.
+3 głosów
odpowiedź 20 stycznia 2017 przez niezalogowany
window.onscroll = function() {runAnimationRun()};

Jeśli nie przekazujesz argumentów, po prostu:

window.onscroll = runAnimationRun();

.on* już się nie używa. !


function runAnimationRun(){
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

Prawdopodobnie nie musisz liczyć wysokości okna przy każdym scorllu - wystarczy policzyć ją raz.


function addShadows() {
    document.getElementById('pointer1').classList.add('pointer-down1');
    document.getElementById('pointerShadow1').classList.add('pointer-down1');
    document.getElementById('pointer2').classList.add('pointer-down2');
    document.getElementById('pointerShadow2').classList.add('pointer-down2');
    document.getElementById('pointer3').classList.add('pointer-down3');
    document.getElementById('pointerShadow3').classList.add('pointer-down3');
    document.getElementById('pointer4').classList.add('pointer-down4');
    document.getElementById('pointerShadow4').classList.add('pointer-down4');
    document.getElementById('pointer5').classList.add('pointer-down5');
    document.getElementById('pointerShadow5').classList.add('pointer-down5');

Nie da się tego w jakąś pętle wrzucić?


 var timeout = timeout+4000;

zmienną timeout zdefiniowałeś już wyżej, teraz wystarczy tylko

timeout += 4000;

for (let i=0; i<arrWindows.length;  i++) {

Czy wiesz, dlaczego w tej linijce jest let?


setInterval("showSpeechBubbles()", 20000);

Nie wywołuj niepotrzebnie eval - eval to zło. Jeśli nie przekazujesz argumentów, po prostu:

setInterval(showSpeechBubbles, 20000);

Można również zastanowić się nad zamianą getElementBy* na CSS selector API. Dopóki nie wiesz co robisz - praca na "żywym HTMLu" nie jest najlepszym pomysłem.

 

PS dobrze, że zaczynasz bez jQ ; )

komentarz 20 stycznia 2017 przez mowmiheniek Stary wyjadacz (11,900 p.)
edycja 21 stycznia 2017 przez mowmiheniek

Dziękuje za rady.

Let powoduje, że zmienna staje się lokalną (jeżeli dobrze rozumiem) i w tym przypadku mogę ją przekazać do funkcji windowin oraz windowout.

Gdzie umieściłbyś zmienną h (wysokość okna)? Nie chcę z niej robić zmienną globalną.

 

window.addEventListener('scroll', runAnimationRun);
function runAnimationRun(){
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    console.log(h);
    if (document.body.scrollTop > h || document.documentElement.scrollTop > h) {
        addShadows();
    }
}
// ......................... pointers and shadows...................
function addShadows() {
    for (x=1; x<5; x++) {
    document.getElementById('pointer'+x).classList.add('pointer-down'+x);
    document.getElementById('pointerShadow'+x).classList.add('pointer-down'+x);
    }
    var shadows = document.getElementsByClassName('fade-in');
    for(var i=0; i < shadows.length; i++) {
        shadows[i].classList.add('shadow-on');
    }
}
// ...................... Speech bubbles ..................
function showSpeechBubbles() {
    let arrWindows= document.getElementsByClassName("windows");
    var timeout = 4000;
    for (let i=0; i<arrWindows.length;  i++) {
            setTimeout(function windowin(){
                arrWindows[i].classList.add("showing");
            }, timeout);
            timeout += 4000;
            setTimeout(function windowout(){
                arrWindows[i].classList.remove("showing");
            }, timeout);
    }
}
showSpeechBubbles();
setInterval(showSpeechBubbles, 20000);

 

1
komentarz 30 stycznia 2017 przez Tomek Sochacki Ekspert (227,510 p.)
generalnie let oznacza dokładnie co piszesz, czyli stworzenie zmiennej w zasięgu blokowym a nie funkcyjnym, czyli odnoszącym się do nawiasów {} pętli for. Ale w tym wypadku jest również inna zaleta, a mianowicie w zapisie for (let i = 0, max = ...; i < max; i+=5){ } zmienna i jest deklarowana na nowo dla każdej iteracji pętli z wartością z ostatniej iteracji. Brzmi może nieco skomplikowanie ale pozwala pisać prostszy kod, jeśli w pętli for chcesz wywoływać jakąś funkcję operującą na i bez tworzenia dodatkowego "sztucznego" zasięgu oddzielną funkcją natychmiastową.

Pamiętaj jednak, że "let" to Ecma 6 i nie działa we wszystkich przeglądarkach.

Podobne pytania

+1 głos
1 odpowiedź 269 wizyt
pytanie zadane 18 stycznia 2022 w JavaScript przez gzwsky Nowicjusz (130 p.)
+1 głos
2 odpowiedzi 304 wizyt
pytanie zadane 25 października 2021 w JavaScript przez Jcob2222 Początkujący (480 p.)
+1 głos
2 odpowiedzi 201 wizyt
pytanie zadane 17 czerwca 2020 w JavaScript przez Marak123 Stary wyjadacz (11,190 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...