进程运行时禁用所有提交按钮的技术实现需求

核心思路 #

• 给所有生成提交按钮统一添加类名，实现批量选择与控制
• 点击任意按钮时，立即禁用所有按钮，杜绝重复触发多进程
• 异步执行图片生成任务（约1分钟），任务完成后恢复所有按钮的可用状态

HTML结构示例 #

<div class="record-item">
  <span>1. 猫咪和朋友一起弹吉他</span>
  <button class="generate-btn" data-prompt="猫咪和朋友一起弹吉他">提交</button>
</div>
<div class="record-item">
  <span>2. 狗狗在树上抓松鼠</span>
  <button class="generate-btn" data-prompt="狗狗在树上抓松鼠">提交</button>
</div>
<div class="record-item">
  <span>3. 一群海豚打冰球</span>
  <button class="generate-btn" data-prompt="一群海豚打冰球">提交</button>
</div>

原生JavaScript实现 #

// 获取所有生成按钮
const generateBtns = document.querySelectorAll('.generate-btn');

// 为每个按钮绑定点击事件
generateBtns.forEach(btn => {
  btn.addEventListener('click', async function() {
    const prompt = this.dataset.prompt;
    
    // 禁用所有提交按钮，同时添加视觉标记
    generateBtns.forEach(b => {
      b.disabled = true;
      b.style.opacity = '0.6';
    });
    
    try {
      // 替换为你的真实图片生成逻辑（比如调用后端API）
      await runImageGeneration(prompt);
      console.log(`图片生成完成：${prompt}`);
      // 此处可添加生成成功后的UI更新，比如展示生成的图片
    } catch (error) {
      console.error(`图片生成失败：${error}`);
      // 可选：添加错误提示弹窗或文字提示
    } finally {
      // 无论成功失败，恢复所有按钮的可用状态与视觉样式
      generateBtns.forEach(b => {
        b.disabled = false;
        b.style.opacity = '1';
      });
    }
  });
});

// 模拟图片生成过程（实际项目中删除此函数，替换为真实业务逻辑）
function runImageGeneration(prompt) {
  return new Promise((resolve, reject) => {
    // 模拟1分钟的生成耗时
    setTimeout(() => {
      // 可取消注释下方代码模拟生成失败场景
      // reject(new Error('生成任务超时'));
      resolve();
    }, 60000);
  });
}

关键细节说明 #

• 使用data-prompt属性存储每个按钮对应的生成指令，避免硬编码，提升维护性
• 点击后立即全局禁用按钮，从交互根源阻止重复触发多进程
• 采用async/await处理异步任务，确保生成流程完全结束后再恢复按钮状态
• finally块保证即使生成过程出错，按钮也能恢复可用，避免用户陷入无法操作的僵局

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