Почему clearTimeout не работает в моем коде?Javascript - PullRequest
Новая
       35

Почему clearTimeout не работает в моем коде?Javascript

1 голос
/ 09 июля 2019

У меня есть некоторые проблемы с clearTimeout ().

setTimeout () работает, но когда я закрываю свое уведомление, я хочу, чтобы setTimeout перестал работать!

Смысл в том, что я не знаю, что в моей функции не правильно.

И когда я закрываю уведомление, я получаю это на своей консоли:

Uncaught DOMException: не удалось выполнить «removeChild» на «Node»: удаляемый узел не является дочерним для этого узла.

Спасибо! 


class Notification {
  addNotification() {

    let notificationContent = `Content <div onclick="notify.closeWindow(event)"></div>`;

    let notifyArea = document.createElement("div");
    notifyArea.classList.add("notification-area");

    let notification = document.createElement("div");
    notification.classList.add("notification");
    notification.innerHTML = notificationContent;

    const area = document.querySelector(".notification-area");

    let firstTimer;
    let secondTimer;

    if (!area) {
      document.body.appendChild(notifyArea);
      notifyArea.appendChild(notification);

      if (notification == null) {
        clearTimeout(firstTimer);
      } else if (notification) {
        firstTimer = setTimeout(() => {
          notifyArea.removeChild(notification);
        }, 10000);
      }
    } else {
      area.appendChild(notification);

      if (!notification) {
        clearTimeout(secondTimer);
      } else {
        secondTimer = setTimeout(function() {
          area.removeChild(notification);
        }, 10000);
      }
    }

  closeWindow(e) {
    e.target.parentElement.parentElement.remove();
  }
  }

1 Ответ

1 голос
/ 09 июля 2019

Сбросьте ваши таймеры в функции closeWindow или removeChild, которые будут вызваны после того, как узел уже удален. Обратите внимание, что вы должны сделать таймеры свойствами класса, чтобы иметь к ним доступ в функции closeWindow 

class Notification {
  addNotification() {

    let notificationContent = `Content <div onclick="notify.closeWindow(event)"></div>`;

    let notifyArea = document.createElement("div");
    notifyArea.classList.add("notification-area");

    let notification = document.createElement("div");
    notification.classList.add("notification");
    notification.innerHTML = notificationContent;

    const area = document.querySelector(".notification-area");

    this.firstTimer;
    this.secondTimer;

    if (!area) {
      document.body.appendChild(notifyArea);
      notifyArea.appendChild(notification);

      if (notification == null) {
        clearTimeout(this.firstTimer);
      } else if (notification) {
        this.firstTimer = setTimeout(() => {
          notifyArea.removeChild(notification);
        }, 10000);
      }
    } else {
      area.appendChild(notification);

      if (!notification) {
        clearTimeout(this.secondTimer);
      } else {
        this.secondTimer = setTimeout(function() {
          area.removeChild(notification);
        }, 10000);
      }
    }

  closeWindow(e) {
    clearTimeout(this.firsTimer);
    clearTimeout(this.secondTimer);
    e.target.parentElement.parentElement.remove();
  }
}
...