掌握setInterval：构建防闪烁、可暂停/恢复的健壮倒计时器

const initialCountdown = 10; // 初始倒计时值
let countdown = initialCountdown;
let intervalId = null; // 初始化为 null，表示当前没有计时器运行

// 假设有一个 setSeconds 函数用于更新UI显示，例如在Draftbit中可能是setState的setter
// function setSeconds(value) { /* 更新UI，例如：this.setState({ seconds: value }); */ }

function startCountdown() {
  // 如果计时器已经在运行，则直接返回，防止重复启动
  if (intervalId !== null) {
    console.log("计时器已在运行，无需重复启动。");
    return;
  }

  intervalId = setInterval(() => {
    if (countdown > 0) {
      countdown--;
      // 调用 setSeconds 更新UI，这里用console.log模拟
      // setSeconds(countdown);
      console.log(`当前倒计时: ${countdown}秒`);
    } else {
      // 倒计时结束，清除计时器并重置
      clearInterval(intervalId);
      intervalId = null; // 清除ID，表示计时器已停止
      countdown = initialCountdown; // 重置倒计时值
      // setSeconds(countdown); // 更新UI显示为初始值
      console.log("倒计时结束并重置。");
    }
  }, 1000); // 每秒执行一次
  console.log("计时器已启动。");
}

// 示例：在Draftbit中，这个函数会绑定到“开始”按钮的onPress事件
// <Button onPress={startCountdown} title="开始计时" />

const initialCountdown = 10; // 初始倒计时值
let countdown = initialCountdown;
let intervalId = null; // 存储 setInterval 的 ID
let isPaused = false; // 标记计时器是否处于暂停状态

// 假设 setSeconds 是一个用于更新UI状态的函数
// 例如在 Draftbit 中，这可能是一个 state setter：
// const [seconds, setSeconds] = useState(initialCountdown);

function updateUI() {
  // 实际项目中，这里会调用 setSeconds(countdown) 来更新界面
  // 例如：setSeconds(countdown);
  console.log(`当前倒计时: ${countdown}秒`);
}

function startTimer() {
  if (intervalId !== null) {
    console.log("计时器已在运行，无需重复启动。");
    return;
  }
  isPaused = false; // 确保不再是暂停状态

  intervalId = setInterval(() => {
    if (countdown > 0) {
      countdown--;
      updateUI(); // 更新UI显示
    } else {
      // 倒计时结束
      clearInterval(intervalId);
      intervalId = null;
      countdown = initialCountdown; // 重置为初始值
      updateUI(); // 更新UI显示
      console.log("倒计时结束并自动重置。");
    }
  }, 1000);
  console.log("计时器已启动。");
}

function pauseTimer() {
  if (intervalId === null) {
    console.log("计时器未运行，无法暂停。");
    return;
  }
  clearInterval(intervalId);
  intervalId = null; // 清除 ID，表示计时器已停止
  isPaused = true; // 标记为暂停状态
  console.log(`计时器已暂停，当前剩余: ${countdown}秒`);
  updateUI(); // 确保UI显示当前暂停值
}

function resumeTimer() {
  if (intervalId !== null) {
    console.log("计时器已在运行，无需恢复。");
    return;
  }
  if (!isPaused) {
    console.log("计时器未暂停，无法恢复。请先启动或暂停。");
    return;
  }
  isPaused = false; // 恢复后不再是暂停状态
  // 从当前 countdown 值继续计时，直接调用 startTimer 即可
  startTimer();
  console.log("计时器已恢复。");
}

function resetTimer() {
  if (intervalId !== null) {
    clearInterval(intervalId);
    intervalId = null;
  }
  countdown = initialCountdown;
  isPaused = false; // 重置后清除暂停标记
  updateUI(); // 更新UI显示为初始值
  console.log("计时器已重置。");
}

// 示例使用（在实际应用中会绑定到按钮的onPress事件）：
// startTimer(); // 首次启动
// setTimeout(pauseTimer, 3000); // 3秒后暂停
// setTimeout(resumeTimer, 6000); // 6秒后恢复
// setTimeout(resetTimer, 9000); // 9秒后重置