@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);
    };
});
  • Вопрос задан
  • 236 просмотров
Решения вопроса 1
@McBernar
Ну так добавьте ивент в функцию вызова попапа.
И проверяйте — если попап открыт (в вашем случае подойдёт проверка на наличие класса css), то удаляйте ивент. Если закрыт, то, соответственно, вешайте прослушку.

Функции для реализации — classList.contains, addEventListener, removeEventListener.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
kocherman
@kocherman
let dialog = document.createElement ('dialog');
dialog.innerHTML = 'Я диалог. Я закрываюсь по Esc';
document.body.appendChild(dialog);
dialog.showModal();
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Есть готовый вариант либы micromodal.js
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы