Почему этот код работает медленно?

283
26 января 2018, 22:10

Это мой первый скрипт, поэтому скорее всего тут куча идиотских решений. Его задача: открыть спрятанное меню при клике, затемнить некоторые элементы при открытом меню и точно также в другую сторону (+ при клике вне открытого меню). Есть также контактная форма (которая, кстати тоже не оч. корректно работает, но это другой вопрос), которая тоже появляется при клике на пункт меню и закрывается в случае клика на крестик (он тоже управляется этим скриптом). Меня раздражает дерганность процесса на боевом сервере. Хочется сделать лаконично и четко.

$(function() {
        var slideMenu = false;
        var slideForm = false;
        function removeOpen() {
            $("body, .face-page__title, .object__background-image, .footer, hr").removeClass('open');
            $(".logo-dark, .fb-dark, .vk-dark, .ins-dark").toggleClass('coverup');
            $(".logo, .fb, .vk, .ins").removeClass('coverup');
        }; 
        function addOpen() {
            $("body, .face-page__title, .object__background-image, .footer, hr").toggleClass('open');
            $(".logo, .fb, .vk, .ins").toggleClass('coverup');
            $(".logo-dark, .fb-dark, .vk-dark, .ins-dark").removeClass('coverup');
        }; 
        function formButton() {
            $( ".object__contact-form_activator" ).click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                $(".object__contact-form").animate({left: '0vw'}, 200);
                slideForm = true;
            });
        };
        function menuButtonMobile() {
            $(".header__menu-button_icon").click(function(e) {
                e.preventDefault(e);
                if(slideMenu) {
                    $(this).removeClass('open');
                    $(".object__menu-slide-box").animate({left: '161vw'}, 200);
                    $(".object__contact-form").animate({left: '-100vw'}, 200);
                    $(".header, .header.scroll").removeClass('open');
                    slideForm = false;
                    slideMenu = false;
                } else {
                    $(this).toggleClass('open');
                    $(".object__menu-slide-box").animate({left: '0'}, 200);
                    $(".header, .header.scroll").addClass('open');
                    slideMenu = true;
                }
            });
        };
        if ( $(window).width() >= 320 &  $(window).width() < 479) {
            menuButtonMobile();
            formButton();
        } else if ( $(window).width() > 375 & $(window).width() < 415) {
            menuButtonMobile();
            formButton();
        } else if ( $(window).width() > 416 & $(window).width() < 1199) {
            menuButtonMobile();
            formButton();
        } else if ( $(window).width() > 1200) {   
            $(".header__menu-button_icon").click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                if(slideMenu) {
                    $(this).removeClass('open');
                    $(".object__menu-slide-box").animate({left: '161vw'}, 200);
                    $(".object__contact-form").animate({left: '-61vw'}, 200);
                    $(".face-page__title_cases-menu, .face-page__title_cases-menu.fixed").removeClass('open');
                    removeOpen();
                    slideForm = false;
                    slideMenu = false;
                } else {
                    $(this).toggleClass('open');
                    $(".object__menu-slide-box").animate({left: '61vw'}, 200);
                    $(".face-page__title_cases-menu, .face-page__title_cases-menu.fixed").addClass('open');
                    addOpen();
                    slideMenu = true;
                }
            });
            formButton();
            $(window).click(function() {
                if(slideMenu && slideForm) {
                    e.stopPropagation();
                } else if (slideMenu) {
                    $(".header__menu-button_icon").removeClass('open');
                    $(".object__menu-slide-box").animate({left: '161vw'}, 200);
                    $(".object__contact-form").animate({left: '-61vw'}, 200);
                    $(".face-page__title_cases-menu, .face-page__title_cases-menu.fixed").removeClass('open');
                    removeOpen();
                    slideMenu = false;
                }
            });
        };
    });
Answer 1

1) Что бы удобнее было разбираться залейте на jsfiddle.net например. 2) У вас в коде довольно много подобных моментов

function menuButtonMobile() {
     $(".header__menu-button_icon").click(function(e) {}} ????
if ( $(window).width() > 1200) {   
     $(".header__menu-button_icon").click(function(e) {}} ????
function formButton() {
     $( ".object__contact-form_activator" ).click(function(e) {}} ????

Инициализацию обработки нажатий надо производить в $(document).ready, а не внутри функций и условий. Возможно в этом и проблема.

$(document).ready(function(){
    $(".header__menu-button_icon").click(function(e) {
    // ваш код
    })
    $(".object__contact-form_activator" ).click(function(e) {
     // ваш код
    })
}
READ ALSO
Не воспроизводится audio на iOS (на iPhone)

Не воспроизводится audio на iOS (на iPhone)

У меня такая проблемаЕсть JS который воспроизводит аудио на сайте и везде не работает, если пользователь заходит с iPhone

230
Как заставить хром запомнить мои данные из автокомплита?

Как заставить хром запомнить мои данные из автокомплита?

Есть у тега input атрибут autocomplete, вот по нему докиhttps://html

345
изменить позицию отображения L.popup

изменить позицию отображения L.popup

в leaflet js отображается на карте маркер при нажатии на него открывается bindPopup(popup)

250
Как реализовать загрузку страницы?

Как реализовать загрузку страницы?

Как реализовать загрузку страницы через XMLHttpRequest? А именно, имеется в indexphp вот такой код:

226