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

Question

我在使用 clearTimeout() 时遇到了一些问题。

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

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

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

未捕获的 DOMException：无法在 'Node' 上执行 'removeChild'：要删除的节点不是该节点的子节点。

谢谢！


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 函数将在节点已删除后调用。请注意，您必须将计时器设置为 class 的属性才能在 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();
  }
}

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

Why clearTimeout is not working in my code? javascript

javascript

settimeout

removechild

cleartimeout