jQuery：函数启动与完成时切换页面背景色的实现方案

看起来你想要在触发文件上传任务时给用户一个清晰的视觉反馈，等长任务完成后再恢复页面原有样式，这个需求很合理——毕竟一分钟的等待时间，得让用户知道系统确实在工作对吧？

这里有个简洁的实现方案，核心思路是先保存页面原始背景色，任务启动时切换样式，任务结束后再恢复：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  submitFileUpload();
})

function submitFileUpload() {
  // 提前保存页面body的原始背景色（避免后续修改干扰）
  const originalBgColor = $('body').css('background-color');

  $('#aws-upload-submit').click(function() {
    // 任务启动：设置背景色作为加载提示（这里用黄色，你可以换成自己想要的颜色）
    $('body').css("background-color","yellow");

    // 执行你的长任务
    loadfiles();

    // 任务完成：恢复原始背景色
    $('body').css("background-color", originalBgColor);
  })
}

// 你的长任务函数（示例保留了1分钟执行时长的模拟）
function loadfiles() {
  // 这里替换成你实际的文件上传逻辑
  console.log('开始执行文件上传任务...');
  // 模拟1分钟执行时间（实际代码可删除此定时器）
  setTimeout(() => {
    console.log('文件上传任务完成');
  }, 60000);
}
</script>
</head>
<body>
<button id="aws-upload-submit">触发上传</button>
</body>
</html>

几个关键细节说明： #

• 为什么用$('body')而非$('*')？修改所有元素的背景色会破坏页面上其他组件（比如按钮、卡片）的原有样式，只修改body的背景色更简洁友好。
• 如果loadfiles是异步函数（比如用了AJAX或Promise），上面的同步写法会导致背景色立刻恢复（因为JS不会等待异步任务），这时候需要调整为异步兼容写法：

// 假设loadfiles返回Promise
$('#aws-upload-submit').click(async function() {
  $('body').css("background-color","yellow");
  await loadfiles(); // 等待异步上传任务完成
  $('body').css("background-color", originalBgColor);
})

// 异步版本的loadfiles示例
function loadfiles() {
  return new Promise((resolve) => {
    // 实际的异步上传逻辑
    setTimeout(() => {
      console.log('异步上传完成');
      resolve();
    }, 60000);
  });
}

这样就能确保只有在文件上传任务真正完成后，页面背景才会恢复到初始状态，给用户准确的状态反馈。

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