如果滿足條件，如何停止 setTimeout 循環

Question

我正在制作一個屏幕保護程序，它顯示數組中的元素，每次迭代之間都有延遲，以逐個緩慢地顯示元素。 我的“onmousemove”事件成功地從頁面中刪除了屏幕保護程序，但我的 startScreensaver() function 中的 for 循環在它實際上應該中斷時繼續運行。 我究竟做錯了什么？

參見 JSfiddle https://jsfiddle.net/m60k75jf/

  const idletime = 2;
  const screenSaver = document.getElementById("screensaver");
  const stars = Array.from(document.querySelectorAll(".star"));
  let mousetimeout;
  let screensaverActive = false;

  window.addEventListener("mousemove", (e) => {
    clearTimeout(mousetimeout);
    if (screensaverActive) {
      stopScreensaver();
    } else {
      mousetimeout = setTimeout(function () {
        startScreensaver();
      }, 1000 * idletime);
    }
  });

  function stopScreensaver() {
    screensaverActive = false;
    stars.forEach((star) => {
      star.classList.remove("is--visible");
    });
    screenSaver.classList.remove("is--active");
  }

  function startScreensaver() {
    screensaverActive = true;
    screenSaver.classList.add("is--active");
    for (let index = 0; index < stars.length; index++) {
      if (screensaverActive) {
        setTimeout(function () {
          stars[index].classList.add("is--visible");
        }, 2000 * index);
      } else {
        break;
      }
    }
  }

Answer 1

你不能那樣打破循環。 您的循環會立即創建所有這些setTimeout 。 你的情況永遠不會觸發。 您需要做的是清除所有這些setTimeout 。 您可以將它們推入一個數組。

let animationTimeouts;
  function startScreensaver() {
    animationTimeouts = [];
    screensaverActive = true;
    screenSaver.classList.add("is--active");
    for (let index = 0; index < stars.length; index++) {
      if (screensaverActive) {
        animationTimeouts.push(setTimeout(function () {
          stars[index].classList.add("is--visible");
        }, 2000 * index));
      } else {
        break;
      }
    }
  }

然后在stopScreensaver上清除它們

  function stopScreensaver() {
    screensaverActive = false;
    if(animationTimeouts) animationTimeouts.forEach(clearTimeout);
    stars.forEach((star) => {
      star.classList.remove("is--visible");
    });
    screenSaver.classList.remove("is--active");
  }

您可能還想重新考慮將 CSS 轉換為.star.is--visible