为什么 clearTimeout 在我的代码中不起作用？ javascript

Question

我遇到了 clearTimeout() 的一些问题。

setTimeout() 正在工作，但是当我关闭通知时，我希望 setTimeout 停止工作！

我的想法是我不知道我的函数中有什么不正确。

当我关闭通知时，我在控制台上收到了这个：

Uncaught DOMException: Failed to execute 'removeChild' on '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();
  }
  }

Answer 1

在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();
  }
}