CSS 如何停止 setTimeout 循环

在本文中，我们将介绍如何停止使用 setTimeout 函数创建的循环。

阅读更多：CSS 教程

什么是 setTimeout？

setTimeout 是 JavaScript 中的一个函数，用于在指定的延迟时间后执行一段代码。它常用于创建定时循环，即在一定时间间隔后重复执行同一段代码。

使用 clearTimeout 停止 setTimeout 循环

要停止使用 setTimeout 创建的循环，我们可以使用 clearTimeout 函数。clearTimeout 用于取消通过 setTimeout 创建的定时任务。

下面是一个示例，演示如何使用 setTimeout 创建循环，并在用户点击按钮后停止循环：

<!DOCTYPE html>
<html>
  <head>
    <title>停止 setTimeout 循环</title>
  </head>
  <body>
    <button id="stopButton">停止循环</button>

    <script>
      // 设置计数器
      let count = 0;

      // 定义循环函数
      function loop() {
        console.log("循环执行，计数：" + count);
        count++;

        // 使用 setTimeout 创建定时任务
        setTimeout(loop, 1000);
      }

      // 初始执行循环
      loop();

      // 监听停止按钮点击事件
      document.getElementById("stopButton").addEventListener("click", function() {
        // 使用 clearTimeout 停止循环
        clearTimeout();
        console.log("循环已停止");
      });
    </script>
  </body>
</html>

在上面的示例中，我们首先创建了一个计数器 count，然后定义了一个循环函数 loop。循环函数中打印计数器的值，并且在每次执行后调用 setTimeout 函数，创建一个间隔为 1000 毫秒的定时任务。接着，我们给停止按钮添加了一个点击事件监听器，当用户点击按钮时，调用 clearTimeout 函数停止循环，并在控制台打印出”循环已停止”。