如何使用事件侦听器在 JavaScript 中暂停和播放循环？

在 JavaScript 中使用事件侦听器可以轻松地实现暂停和播放循环。以下是一些实现方法：

使用 setInterval()

const delay = 1000; // 指定每次循环的延迟时间，单位毫秒
let count = 0; // 循环计数器
let intervalId; // 存储 setInterval() 的返回值，用于后续清除

function loop() {
  console.log(`循环计数器 ${count}`);
  count++;

  if (count >= 10) {
    clearInterval(intervalId); // 循环达到指定次数时清除 intervalId
  }
}

function playLoop() {
  intervalId = setInterval(loop, delay);
  console.log('循环已开始');
}

function pauseLoop() {
  clearInterval(intervalId);
  console.log('循环已暂停');
}

首先，我们使用 setInterval() 函数创建了一个循环，循环计数器会在每次循环中自增，当计数器达到指定次数时我们通过 clearInterval() 函数清除了 intervalId，从而停止了循环。接下来，我们定义了两个函数 playLoop() 和 pauseLoop() 分别用于开始和暂停循环，它们通过 setInterval() 和 clearInterval() 来实现。

使用 requestAnimationFrame()

let count = 0; // 循环计数器
let requestId; // 存储 requestAnimationFrame() 的返回值，用于后续清除

function loop() {
  console.log(`循环计数器 ${count}`);
  count++;

  if (count < 10) {
    requestId = window.requestAnimationFrame(loop);
  }
}

function playLoop() {
  requestId = window.requestAnimationFrame(loop);
  console.log('循环已开始');
}

function pauseLoop() {
  window.cancelAnimationFrame(requestId);
  console.log('循环已暂停');
}

在这个示例中，我们使用 requestAnimationFrame() 函数创建了一个循环，循环计数器会在每次循环中自增。当计数器达到指定次数时，我们通过 window.cancelAnimationFrame() 函数取消了 requestId，从而停止了循环。与上面的例子类似，我们定义了两个函数 playLoop() 和 pauseLoop() 来开始和暂停循环，它们分别使用 requestAnimationFrame() 和 window.cancelAnimationFrame() 实现。

需要注意的是，使用 requestAnimationFrame() 创建的循环在某些情况下会执行得更流畅，因为它会根据浏览器的绘图帧率动态调整循环速度。

结语

以上这些都是使用事件侦听器在 JavaScript 中暂停和播放循环的方法，你可以根据实际需要来选择使用哪一种。另外，在实际开发中还可能会碰到其他的循环场景，你也可以根据这些示例进行拓展，以适应不同的应用场景。