如何通过按钮暂停运行中的页面跳转倒计时，再次点击即可恢复

你之前尝试用clearInterval失败的原因是原代码使用setTimeout递归触发倒计时，和setInterval是两套定时器机制，需要用clearTimeout清除对应的定时器任务。

以下是完整可直接使用的修改后代码：

<!-- 页面DOM部分 -->
<div>
  <span id="timer"></span>
  <button id="pauseBtn">暂停倒计时</button>
</div>

<script type="text/javascript">
  var count = 20; // 倒计时总秒数
  var redirect = "https://www.instagram.com/"; // 跳转目标地址
  var timeoutId = null; // 存储定时器ID
  var isPaused = false; // 暂停状态标记

  function countDown() {
    var timer = document.getElementById("timer");
    if (count > 0) {
      count--;
      timer.innerHTML = "przekieruje cię za " + count + " sekund.";
      // 存储当前定时器的ID，方便后续清除
      timeoutId = setTimeout(countDown, 1000);
    } else {
      window.location.href = redirect;
    }
  }

  // 暂停/恢复切换逻辑
  document.getElementById("pauseBtn").addEventListener('click', function() {
    if (isPaused) {
      // 当前是暂停状态，点击后恢复倒计时
      isPaused = false;
      this.innerText = "暂停倒计时";
      countDown();
    } else {
      // 当前是运行状态，点击后暂停
      isPaused = true;
      this.innerText = "恢复倒计时";
      // 清除待执行的定时器任务
      clearTimeout(timeoutId);
    }
  })

  // 页面加载后自动开始倒计时
  countDown();
</script>

核心逻辑说明 #

• 新增的timeoutId变量会存储每次生成的延时任务ID，暂停时直接调用clearTimeout清除这个ID对应的待执行任务即可停止倒计时
• isPaused变量用来标记当前倒计时的状态，点击按钮时根据这个状态切换运行/暂停模式
• 恢复倒计时时会直接复用剩余的count数值继续计时，不需要重置总时长

内容的提问来源于stack exchange，提问作者Zimnyjestem