0

У меня есть функция, которая генерирует уведомления при помощи создания DOM элементов:

function createNotification(content) {
  let notificationNode = document.createElement("div");
  let notificationDescrNode = document.createElement("p");
  let notificationButtonNode = document.createElement("span");
  notificationNode.classList.add("notification");
  notificationDescrNode.classList.add("notification__descr");
  notificationButtonNode.classList.add("notification__button");
  notificationDescrNode.innerHTML = content;
  notificationButtonNode.innerHTML = "ok";
  document.body.appendChild(notificationNode);
  notificationNode.appendChild(notificationDescrNode);
  notificationNode.appendChild(notificationButtonNode);
  document.body.classList.add("page_overflow_hidden");

  notificationButtonNode.addEventListener("click", function(e) {
    document.body.classList.remove("page_overflow_hidden");
    document.body.removeChild(notificationNode);
    notificationNode = null;
    notificationDescrNode = null;
    notificationButtonNode = null;
  });
}

createNotification("Попробуйте через несколько секунд!");
.notification {
  min-width: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
  background: #000;
  padding: 30px;
  text-align: center;
  color: #fff;
  border-radius: 20px;
}

.notification__descr {
  font-size: 18px;
  margin-bottom: 15px;
}

.notification__button {
  cursor: pointer;
  display: block;
  text-transform: uppercase;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  color: #000;
}

Подскажите, как правильно писать код, что бы не забивать память. В примере я удалю DOM узел, но так как он был создан при помощи метода document.createElement и храниться в переменной, то несмотря на то, что я удалю элемент, у обработчика событий все равно остается ссылка.

В связи с этим, я всем переменным присвоил значение null, но по идеи необходимо присвоить только для notificationButtonNode, так как остальные переменные очищаюсь, ибо нет на них ссылок.

9
  • 1
    Внутри обработчика удаляйте это событие.
    – Doigrales
    29 дек 2018 в 12:30
  • Почему Вы считаете, что здесь нужны какие-то дополнительные действия (обнуление переменных) для сборки мусора?
    – user176262
    29 дек 2018 в 14:09
  • @Igor, потому что удалив элемент со страницы, в переменной остается ссылка, на основе которой элемент создавался, а обработчик события привязан к этой переменной. Если бы я до конца понимал механизм, но не задавал бы вопрос) 29 дек 2018 в 14:33
  • Может подойдёт решение по типу того, что делают в react. При создании каждого уведомления вы создание новую функцию для кнопки. Но если вынести эту функцию за пределы функции создания уведомления и потом ссылаться на нее при навешиванием обработчика, то новая функция создаваться не будет. 29 дек 2018 в 15:32
  • @MishaSaidov, буду благодарен, если перефразируете ваш комментарий. Несколько раз перечитал, и не особо уловил идею. 29 дек 2018 в 15:53

1 ответ 1

0

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

7
  • почему тогда обработчик продолжает работать? jsfiddle.net/Devinora/p6rza139 29 дек 2018 в 15:05
  • @ВиталикЧерный Потому что в фидле есть еще один обработчик - add.click, который Вы не включили в вопрос и который хранит ссылку на notificationButtonNode.
    – user176262
    29 дек 2018 в 15:09
  • я просто создал html файл и запустил его в браузере, и это так же работает. и я буду благодарен за ответ не по теме: почему нельзя добавить несколько одинаковых элементов? при повторной попытке, он просто не добавляется. можно использовать метод cloneNode, но это уже другая история. 29 дек 2018 в 15:27
  • @ВиталикЧерный Вы хотите, чтобы я объяснил код, которого не вижу?
    – user176262
    29 дек 2018 в 16:06
  • По поводу первого вопроса, я продемонстрировал на jsfiddle, и так же его проверил создав html файл и поведение не поменялось. Вот код по поводу второго вопроса: jsfiddle.net/Devinora/4b5rfynd 29 дек 2018 в 16:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.