Как улучшить производительность кода в данном случае?

Question

[Sergeysemenovich]

Доброй ночи. Получил замечания , но не могу понять как это можно исправить ? Если что то пытаюсь , то работать перестает вовсе

Сейчас слушатель keydown добавляется один раз при инициализации скрипта, постоянно висит в памяти и слушает все нажатия клавиш на странице. Потенциально это может негативно отразиться на производительности веб-приложения. Поэтому данный обработчик следует добавлять при открытии и удалять при закрытии модального окна

function togglePopup(popup) {
    popup.classList.toggle('popup_active');
}
//обработчик нажатия Escape добавляйте при открытии и удаляйте при закрытии модального окна.
document.addEventListener('keydown', function(evt) {
    if (evt.key === 'Escape' && addPopup.classList.contains('popup_active')) {
        togglePopup(addPopup);
    };
    if (evt.key === 'Escape' && editPopup.classList.contains('popup_active')) {
        togglePopup(editPopup);
    };
    if (evt.key === 'Escape' && imagePopup.classList.contains('popup_active')) {
        togglePopup(imagePopup);
    };
});

Answer 1

[McBernar]

Ну так добавьте ивент в функцию вызова попапа.
И проверяйте — если попап открыт (в вашем случае подойдёт проверка на наличие класса css), то удаляйте ивент. Если закрыт, то, соответственно, вешайте прослушку.

Функции для реализации — classList.contains, addEventListener, removeEventListener.

Comments

[Sergeysemenovich]

@McBernar

function togglePopup(popup) {
    popup.classList.toggle('popup_active');
    if (popup.classList.contains('popup_opened')) {
        document.addEventListener('keydown', closeEscape);
    } else {
        document.removeEventListener('keydown', closeEscape);
    }
}






const closeEscape = (evt) => {
    if (evt.key === 'Escape') {
        const popupList = Array.from(document.querySelectorAll('.popup'));
        popupList.forEach((popup) => {
            if (popup.classList.contains('popup_active')) {
                togglePopup(popup);
            }
        });
    }
}

как то так ?

[McBernar]

Sergeysemenovich, если у вас только один попап может быть открыт, то масссив попапов вам там не нужен.

[xmoonlight]

Sergeysemenovich, получите линк на объект сразу после инициализации при загрузке страницы и потом его везде юзайте. Не нужно вот этой "жести": document.querySelectorAll('.popup').

[Sergeysemenovich]

xmoonlight,
сделал вот так вот и не заработало

function togglePopup(popup) {
    popup.classList.toggle('popup_active');
    if (popup.classList.contains('popup_active')) {
        document.addEventListener('keydown', closeEscape);
    } else {
        document.removeEventListener('keydown', closeEscape);
    }
}
const closeEscape = (evt) => {
    if (evt.key === "Escape") {
        popup.classList.remove('popup_active');
    }
}

[xmoonlight]

Sergeysemenovich, так Вы не передали в анонимную функцию идентификатор popup.

Answer 2

[kocherman]

let dialog = document.createElement ('dialog');
dialog.innerHTML = 'Я диалог. Я закрываюсь по Esc';
document.body.appendChild(dialog);
dialog.showModal();

Answer 3

[Programiker]

он и так очень быстрый

Answer 4

[xmoonlight]

Есть готовый вариант либы micromodal.js