Sprawdzanie pozycji scrolla - wydajność

Question

Witam.

Mój kod sprawdza, czy użytkownik przekroczył określoną wartość wysokości w px i robi pewne rzeczy.

Problemem jest tutaj wydajność - przy logowaniu do konsoli zauważyłem, że skrypt odświeża się milion razy na minutę :) I czuć po przewijaniu, że szybkość działania strony spada. 
Oczywiście powód to trzy ostatnie linijki. 

Jak to ugryźć, żeby było lepiej?

 

let size_of_svg = 500;


                  function update() {
                   if ($(window).scrollTop() > (size_of_svg-50)) {
                       $('.svg_body').addClass('active');
                       $('.show_map').addClass('active');
                       $('.small_map').addClass('active');
                       $(svgDOM).appendTo(small_map[0]);
                       svgDOM.style.width = "400px";
                       svgDOM.style.height = "400px";
                       minimalize.disabled = true;
                       zoom_in.disabled = true;
                       zoom_out.disabled = true;
                       maximize.disabled = true;
                   } else {
                       $('.svg_body').removeClass('active');
                       $('.show_map').removeClass('active');
                       $('.small_map').removeClass('active');
                       $(svgDOM).appendTo('.svg_body');
                       svgDOM.style.width = size_of_svg+"px";
                       svgDOM.style.height = size_of_svg+"px";
                       minimalize.disabled = false;
                       zoom_in.disabled = false;
                       zoom_out.disabled = false;
                       maximize.disabled = false;
                     }
                    }

                    $(window).scroll(function () {
                        update();
                    });

 

Answer 1

Ja bym dał jakaś instrukcje warunkowa w listenerze, żeby nie wywoływać funkcji za każdym razem jak użytkownik będzie scrollowal, a tylko wtedy jak warunek zostanie spełniony. Dodatkowo jeśli funkcja ma się wywołać tylko raz, to można by zadeklarować zmienna, która zostanie zainkrementowana wraz z wywołaniem funkcji i sprawdzać jej wartość przed wywołaniem funkcji.

Comments

Dodałem ifki do kodu i podczas przewijania odświeżają się tylko one, jest znacznie lepiej.

Ale czy może być jeszcze lepiej? 

 

let size_of_svg = 500;

let count = 1;
            
function update() {
    if ($(window).scrollTop() > (size_of_svg-50)) {
        if (count === 1)
        {
            $('.svg_body').addClass('active');
            $('.show_map').addClass('active');
            $('.small_map').addClass('active');
            $(svgDOM).appendTo(small_map[0]);
            svgDOM.style.width = "400px";
            svgDOM.style.height = "400px";
            minimalize.disabled = true;
            zoom_in.disabled = true;
            zoom_out.disabled = true;
            maximize.disabled = true;
        }
        if (count != 0)
        {
            count = 0;
        }

    } else {
        if (count === 0)
        {
            $('.svg_body').removeClass('active');
            $('.show_map').removeClass('active');
            $('.small_map').removeClass('active');
            $(svgDOM).appendTo('.svg_body');
            svgDOM.style.width = size_of_svg+"px";
            svgDOM.style.height = size_of_svg+"px";
            minimalize.disabled = false;
            zoom_in.disabled = false;
            zoom_out.disabled = false;
            maximize.disabled = false;
        }
        if (count != 1)
        {
            count = 1;
        }
    }
}
$(window).scroll(function () {
   update();
});

 

---

Można by podzielić cała funkcje update na dwie oddzielne, coś w stylu add i remove. Cała logikę instrukcji warunkowych przenieść do funkcji anonimowej i tylko funkcje add i remove wywoływać tylko wtedy, gdy sprawdza się warunki w funkcji anonimowej w scrollu.

Teraz jest lepiej, ale wciąż za każdym zdarzeniem scroll wywoływana jest funkcja update, a tak wywoływana byłaby tylko w określonych warunkach.

Nie mam dostępu do komputera, żeby dać jakiś przykład, ale mam nadzieje, ze rozumiesz o co chodzi.

---

Racja, dobrze wykombinowane! Cofnę to wszystko jeszcze poziom wyżej, dzięki za pomoc.

---

Spoko, po to jest to forum ;)

---

@thryndl, efekt:

 

let size_of_svg = 500;

let isScrolled = 0;

function scrolledUp()
{
    $('.svg_body').removeClass('active');
    $('.show_map').removeClass('active');
    $('.small_map').removeClass('active');
    $(svgDOM).appendTo('.svg_body');
    svgDOM.style.width = size_of_svg+"px";
    svgDOM.style.height = size_of_svg+"px";
    ZoomButtons.style.display = "inline-flex";
    isScrolled = 0;
}

function scrolledDown()
{
    $('.svg_body').addClass('active');
    $('.show_map').addClass('active');
    $('.small_map').addClass('active');
    $(svgDOM).appendTo(small_map[0]);
    ZoomButtons.style.display = "none";
    isScrolled = 1;
}


$(window).scroll(function () {
    if ($(window).scrollTop() > (size_of_svg-50)) {
        if (isScrolled === 0)
        {
            scrolledDown();
        }
    }
    else
    {
        if (isScrolled === 1)
        {
            scrolledUp();
        }
    }
});

 

---

Dokładnie o to chodziło 

Answer 2

A nie lepiej zastosować Intersection Observer?

Comments

Nie wspierane na IE6, więc odpada :P

---

Jak mnie takie podejście wkurza, serio. Co proponuje się gdzieś nowsze rozwiązanie "no a IE?". No a IE jest martwe i oglądanie się na niego nie przyczyni się do jakiegokolwiek rozwoju Sieci. Tyle w temacie. A z IO wgl nie ma problemu, bo to API proste do stworzenia polyfilla.

Answer 3

Przy okazji do zoptymalizowania możesz użyć tego dekoratora