如何设置Spinner GIF持续显示直至函数执行完成并跳转页面？

你之前用固定时长的setTimeout来控制加载动画的隐藏，这确实是个常见误区——毕竟你没法提前预知目标函数到底要跑多久，固定时长要么会让动画提前消失（函数还没跑完），要么白白多转半天（函数早就执行完了）。

正确的思路应该是：让加载动画的隐藏时机完全绑定到目标函数的执行完成事件上，而不是硬卡时间。下面给你具体的实现方案：

第一步：重构基础显示/隐藏函数 #

先把你的动画控制函数整理得更清晰：

// 显示Spinner动画
function showSpinner() {
  document.getElementById("myDiv").style.display = "block";
}

// 隐藏Spinner动画
function hideSpinner() {
  document.getElementById("myDiv").style.display = "none";
}

第二步：绑定动画到目标函数的完成事件 #

假设你的目标函数是异步操作（比如表单提交、API请求这类耗时操作），我们用async/await来等待它完成：

// 你的核心业务函数（比如提交表单、处理数据）
async function executeTargetTask() {
  try {
    // 这里写你的实际业务逻辑，比如用fetch提交表单
    const formData = new FormData(document.getElementById("your-form"));
    const response = await fetch("/submit-endpoint", {
      method: "POST",
      body: formData
    });

    // 业务逻辑执行成功后，隐藏动画并跳转
    hideSpinner();
    window.location.href = "/next-page"; // 跳转到下一页
  } catch (error) {
    // 即使出错，也要隐藏动画，避免一直转
    hideSpinner();
    console.error("任务执行失败:", error);
    // 这里可以添加错误提示，比如alert('提交失败，请重试')
  }
}

// 给提交按钮绑定点击事件
document.querySelector('input[type="submit"]').addEventListener("click", async function(e) {
  e.preventDefault(); // 阻止表单默认提交行为（如果是表单按钮的话）
  showSpinner(); // 先显示动画
  await executeTargetTask(); // 等待目标函数执行完成
});

如果你的目标函数是同步的 #

如果你的业务逻辑是同步执行的（没有异步请求），那就更简单了：

function executeTargetTask() {
  // 同步执行的业务逻辑，比如复杂计算
  // ...

  // 执行完成后直接隐藏动画并跳转
  hideSpinner();
  window.location.href = "/next-page";
}

document.querySelector('input[type="submit"]').addEventListener("click", function(e) {
  e.preventDefault();
  showSpinner();
  executeTargetTask();
});

关键要点 #

• 永远不要用固定时长的setTimeout来控制加载动画的隐藏，除非你100%确定函数执行时长不会变化
• 不管任务成功还是失败，都要调用hideSpinner()，避免动画一直停留在页面上
• 如果是表单按钮，一定要阻止默认提交行为（e.preventDefault()），否则页面会直接跳转，动画根本来不及显示

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