通过intersectionObserver清除超时

Question

我有以下代码，它根据 junctionObserver 结果为 true 加载投资组合中的下一个项目。但是，如果用户向外滚动并且 junctionObserver 返回 false，我想停止重定向。这并没有发生，页面只是在 5 秒后重新加载。

handleIntersect(intersecting) {
    if (intersecting) {
      console.log("Is intersecting");
      this.element.classList.add("animate");
      this.timeout = setTimeout(() => {
        window.location.href = this.href;
      }, 5200);
    }

    if (!intersecting) {
      console.log("Is not intersecting");
      this.element.classList.remove("animate");

      if (this.timeout) {
        clearTimeout(this.timeout);
        this.timeout = null;
        console.log('clearing Timeout' + this.timeout);
      }
    }
  }

当我滚动出元素时，我确实在控制台中收到了确认“清除超时为空”消息的所有消息。也许我在

window.locatoion.href

中遗漏了一些东西。

Answer 1

尝试在每次调用setTimeout之前清除超时。我有一种感觉，您正在创建多个超时并覆盖

this.timeout

变量。

    if (intersecting) {
      console.log("Is intersecting");
      this.element.classList.add("animate");
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        window.location.href = this.href;
      }, 5200);
    }