我不能用 clearInterval 停止 setInterval

Question

我正在为移动设备创建简单的滑块。这一切都基于检查宽度和 setInterval() 方法。情况是当设备宽度达到 800px 以上时，我希望它停止！老实说，我不太确定将 clearInterval() 放在哪里。我在调整大小事件中尝试了它，但它也不起作用。计时器仍在工作，它已经触发后我无法停止它。

class mobileSlider {
  constructor() {
    this.image = document.querySelector(".mobile__top-slider");
    this.topCircles = document.querySelector(".top__circles");
    this.paths = ["xgarda.jpg", "logofinal.png", "my.jpg"];
    this.initialWidth = window.innerWidth;
    this.width = null;
    this.timer = null;
    this.isMobile = true;
    this.createSlider();
  }


  createSlider() {
    this.drawDots();
    this.checkWidth();
    this.animateSlider();
  }

  drawDots() {
    this.paths.forEach((_, index) => {
      const circle = document.createElement("div");
      circle.setAttribute("class", "top circle");
      circle.setAttribute("data-id", `${index + 1}`);
      this.topCircles.appendChild(circle);
    });
  }



  animateSlider() {
    let currentIndex = 0;

    this.image.style.backgroundImage = `url(./images/${this.paths[currentIndex]})`;
    this.topCircles.children[currentIndex].style.border = "2px solid #322B0F";

    if (this.isMobile) {
      this.timer = setInterval(() => {
        currentIndex++;
        if (currentIndex > 2) {
          currentIndex = 0;
          this.topCircles.children[this.paths.length - 1].style.border = "none";
        }

        this.image.style.backgroundImage = `url(./images/${this.paths[currentIndex]})`;
        this.topCircles.children[currentIndex].style.border =
          "2px solid #322B0F";

        if (currentIndex > 0) {
          this.topCircles.children[currentIndex - 1].style.border = "none";
        } else {
          this.topCircles.children[currentIndex + 1].style.border = "none";
        }
      }, 2000);
    } else if (!this.isMobile) {
      console.log("przekroczony");
      window.clearInterval(this.timer);
    }
  }

  checkWidth() {
    if (this.initialWidth >= 800) {
      this.isMobile = false;
    }

    window.addEventListener("resize", () => {
      if (window.innerWidth >= 800) {
        this.isMobile = false;
        this.animateSlider();
      } else {
        this.isMobile = true;
        this.animateSlider();
      }
    });
  }
}

const run = new mobileSlider();