求助：Bootstrap/JS提交按钮API调用时加载动画不显示

问题根源 #

你的代码存在两个核心问题导致加载状态无法正常显示：

1. 重复定义showLoader函数：后面的函数声明会覆盖前面的，导致逻辑执行异常
2. 直接替换按钮innerHTML：这种方式会销毁原有DOM元素，容易引发渲染时机问题，不如直接控制已有元素的显示/隐藏稳定

修复方案 #

1. 清理重复代码

删除重复的showLoader函数定义，只保留一个版本。

2. 修改showLoader逻辑，复用原有DOM元素

不要直接替换按钮的innerHTML，而是通过控制原有generateNamesText和generateNamesSpinner的显示状态来实现加载效果，这样更稳定且符合Bootstrap的使用习惯。

3. 确保DOM渲染时机

在调用showLoader(true)后，给浏览器留出渲染DOM的时间，再发起API请求（避免JS同步执行导致浏览器来不及更新UI）。

修改后的完整代码 #

HTML部分（保留原有结构）

<button class="btn btn-primary" type="submit" id="generateNamesButton">
  <span id="generateNamesText">Generate Names</span>
  <span id="generateNamesSpinner" style="display: none">
    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    <span class="visually-hidden">Loading...</span>
  </span>
</button>

JavaScript部分

document.querySelector("form").addEventListener("submit", async function(event) {
    event.preventDefault();

    const inputIndustry = document.querySelector("#inputIndustry").value;
    const languageSelect = document.querySelector("#languageSelect");
    const selectedLanguage = languageSelect.options[languageSelect.selectedIndex].value;

    showLoader(true);

    // 给浏览器时间渲染加载状态后再发起请求
    await new Promise(resolve => setTimeout(resolve, 0));

    try {
        const names = await generateNames(inputIndustry, selectedLanguage);
        const namesContainer = document.querySelector("#namesContainer");
        const card = namesContainer.parentElement;
        card.style.display = "block";
        namesContainer.innerHTML = `<ul>${names.split("\n").map(name => `<li>${name}</li>`).join("")}</ul>`;
    } catch (error) {
        console.error(error);
        const namesContainer = document.querySelector("#namesContainer");
        namesContainer.innerHTML = "Error generating names";
    } finally {
        // 确保无论请求成功/失败都关闭加载状态
        showLoader(false);
    }
});

function showLoader(show) {
    const button = document.querySelector("#generateNamesButton");
    const textSpan = document.querySelector("#generateNamesText");
    const spinnerSpan = document.querySelector("#generateNamesSpinner");

    button.disabled = show;
    textSpan.style.display = show ? "none" : "inline";
    spinnerSpan.style.display = show ? "inline" : "none";
}

关键改动说明 #

• 使用finally块确保加载状态一定会被关闭，避免请求失败时按钮一直处于禁用/加载状态
• 复用原有DOM元素，通过style.display控制显示/隐藏，避免innerHTML替换带来的DOM重建问题
• 添加await new Promise(resolve => setTimeout(resolve, 0))让浏览器优先完成UI渲染，再执行API请求，解决加载状态一闪而过或不显示的问题

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