基于DiscordJS实现ON/OFF按钮计时功能的技术方案

以下是完整的可运行实现代码，附带中文注释，同时拆解关键逻辑帮你理解：

// 创建按钮行，包含ON和OFF两个功能按钮
const row = new MessageActionRow().addComponents(
  new MessageButton()
    .setCustomId('onButton')
    .setLabel('ON')
    .setStyle('SUCCESS'), // 绿色成功样式
  new MessageButton()
    .setCustomId('offButton')
    .setLabel('OFF')
    .setStyle('DANGER'), // 红色危险样式
);

// 发送带按钮的初始回复消息
await message.reply({
  content: '点击按钮开始或停止计时:',
  components: [row],
});

// 定义交互过滤器：只响应指定的两个按钮
const filter = (interaction) => 
  interaction.customId === 'onButton' || interaction.customId === 'offButton';

// 创建组件收集器，监听按钮交互，超时时间60秒
const collector = message.createMessageComponentCollector({
  filter,
  time: 60000,
});

// 存储计时的起始和结束时间
let timerStart;
let timerEnd;

// 监听收集到的交互事件
collector.on('collect', (interaction) => {
  if (interaction.customId === 'onButton') {
    // 点击ON按钮，记录当前时间作为起始点
    timerStart = new Date();
    // 发送仅当前用户可见的提示消息
    interaction.reply({ content: '计时已启动!', ephemeral: true });
  } else if (interaction.customId === 'offButton') {
    // 点击OFF按钮，记录结束时间
    timerEnd = new Date();
    if (timerStart) {
      // 计算耗时（毫秒转秒，保留两位小数更友好）
      const elapsedSeconds = (timerEnd - timerStart) / 1000;
      interaction.reply({
        content: `计时已停止! 耗时: ${elapsedSeconds.toFixed(2)} 秒`,
        ephemeral: true,
      });
    } else {
      // 未启动计时就点击OFF的提示
      interaction.reply({
        content: '请先点击ON启动计时!',
        ephemeral: true,
      });
    }
    // 停止收集器，结束本次计时会话
    collector.stop();
  }
});

// 收集器结束时（超时或手动停止），编辑初始消息移除按钮
collector.on('end', () => {
  message.edit({
    content: '计时会话已结束.',
    components: [],
  });
});

关键逻辑说明 #

• 按钮组件：用MessageActionRow将按钮组合成一行，customId是区分不同按钮的唯一标识，必须确保不重复
• 交互收集器：createMessageComponentCollector用于监听按钮点击事件，filter参数过滤无关交互，time参数设置收集器超时时间
• 状态管理：用变量timerStart存储起始时间，确保多次交互之间能保留状态
• 临时回复：ephemeral: true设置回复仅触发交互的用户可见，避免频道消息混乱
• 收集器停止：点击OFF按钮后手动停止收集器，防止后续无效交互；超时后收集器自动停止，此时编辑初始消息移除按钮，避免用户点击无效按钮

可优化方向：

• 禁止重复点击ON按钮：在ON按钮逻辑中判断timerStart是否已存在，若存在则提示用户计时已启动
• 支持多次启停：移除collector.stop()，允许用户多次点击ON/OFF重新计时
• 格式化耗时：将秒数转换为时:分:秒格式，提升可读性

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