使用setInterval构建高效倒计时器：防止重复启动与实现启停功能教程

let countdown = 10; // 初始倒计时值，可根据需要修改
let intervalId = null; // 用于存储 setInterval 的 ID，初始为 null

// 假设这是一个在UI中更新秒数的函数
// 在Draftbit等低代码平台中，这通常对应于更新一个文本组件的值
function setSeconds(value) {
  console.log("当前秒数:", value);
  // 实际应用中，这里会更新UI组件的文本或值，例如：
  // this.setState({ secondsDisplay: value });
}

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

  // 启动新的计时器，并将返回的ID存储起来
  intervalId = setInterval(() => {
    if (countdown > 0) {
      countdown--;
      setSeconds(countdown); // 更新UI显示
    } else {
      // 倒计时结束，停止计时器并重置
      stopTimer(); // 调用停止函数清除定时器
      countdown = 10; // 倒计时结束后恢复到初始值
      setSeconds(countdown); // 更新UI显示为初始值
      console.log("倒计时结束，已自动重置。");
    }
  }, 1000); // 每秒执行一次
  console.log("计时器已启动。");
}

/**
 * 停止倒计时器（可用于暂停）
 */
function stopTimer() {
  if (intervalId !== null) {
    clearInterval(intervalId); // 清除定时器
    intervalId = null; // 将 ID 重置为 null，表示计时器已停止
    console.log("计时器已停止。");
  }
}

const initialCountdownValue = 10; // 定义一个常量来保存初始值

/**
 * 重置倒计时器到初始值
 */
function resetTimer() {
  stopTimer(); // 停止任何正在运行的计时器
  countdown = initialCountdownValue; // 恢复到初始值
  setSeconds(countdown); // 更新UI显示
  console.log("计时器已重置为初始值。");
}

// 倒计时器状态变量
let countdown = 10; // 当前倒计时值
let intervalId = null; // 用于存储 setInterval 的 ID
const initialCountdownValue = 10; // 定义一个常量来保存初始值

// 假设这是一个在UI中更新秒数的函数（在Draftbit中需根据实际组件绑定）
function setSeconds(value) {
  console.log("当前秒数:", value);
  // 在Draftbit中，你可能会这样更新一个文本组件的属性：
  // 例如：this.setState({ countdownText: value.toString() });
  // 或者通过 Draftbit 的变量绑定机制直接更新
}

/**
 * 启动倒计时器。如果已在运行，则不执行任何操作。
 */
function startTimer() {
  if (intervalId !== null) {
    console.log("计时器已在运行，无需重复启动。");
    return;
  }

  intervalId = setInterval(() => {
    if (countdown > 0) {
      countdown--;
      setSeconds(countdown);
    } else {
      // 倒计时结束，自动停止并重置
      stopTimer();
      countdown = initialCountdownValue; // 恢复到初始值
      setSeconds(countdown); // 更新UI显示为初始值
      console.log("倒计时结束，已自动重置。");
    }
  }, 1000);
  console.log("计时器已启动。");
}

/**
 * 停止倒计时器（用于暂停）。
 */
function stopTimer() {
  if (intervalId !== null) {
    clearInterval(intervalId);
    intervalId = null;
    console.log("计时器已停止。");
  }
}

/**
 * 重置倒计时器到初始值。
 */
function resetTimer() {
  stopTimer(); // 确保计时器停止
  countdown = initialCountdownValue; // 恢复到初始值
  setSeconds(countdown); // 更新UI显示
  console.log("计时器已重置为初始值。");
}

// 初始显示倒计时值
setSeconds(countdown);

// 示例：在Draftbit中，这些函数会绑定到按钮的onPress事件
// 例如：
// 在“开始”按钮的onPress事件中调用 startTimer()
// 在“暂停”按钮的onPress事件中调用 stopTimer()
// 在“重置”按钮的onPress事件中调用 resetTimer()