本文介绍如何在 JavaScript 的 await fetch 调用期间显示一个全屏等待动画，从而阻塞用户与页面的进一步交互。通过创建一个覆盖整个页面的 div 元素，并利用 CSS 控制其显示与隐藏，可以实现一个简单的等待提示效果，提升用户体验。
在进行网络请求时，特别是使用 await fetch 进行异步操作时，用户可能需要等待一段时间才能看到结果。为了提升用户体验，可以在等待期间显示一个等待动画，并阻塞用户与页面的进一步交互，避免不必要的操作。
实现方法
主要思路是创建一个覆盖整个页面的 div 元素，并使用 CSS 控制其显示与隐藏。当发起 fetch 请求时，显示该 div 元素，当请求完成后，隐藏该 div 元素。
1. HTML 结构
首先，在 HTML 中添加一个 div 元素，用于显示等待动画。该 div 元素需要覆盖整个页面，并具有较高的 z-index 值，以确保其位于其他元素之上。
<div id="loading" style="position: fixed; z-index: 1000; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; justify-content: center; align-items: center; display: none; background-color: rgba(0, 0, 0, 0.5);"> <span>Wait...</span> <!-- Loading spinner goes here --> </div>
解释：
- position: fixed: 将 div 元素固定在屏幕上，使其不随页面滚动而移动。
- z-index: 1000: 设置 div 元素的堆叠顺序，确保其位于其他元素之上。
- width: 100vw; height: 100vh: 设置 div 元素的宽度和高度，使其覆盖整个视口。
- top: 0; left: 0: 设置 div 元素的位置，使其位于屏幕的左上角。
- display: flex; justify-content: center; align-items: center: 使用 Flexbox 布局，将内容居中显示。
- display: none: 默认情况下，隐藏 div 元素。
- background-color: rgba(0, 0, 0, 0.5): 添加半透明的背景色，进一步遮盖页面内容。
2. JavaScript 代码
接下来，在 JavaScript 代码中，在发起 fetch 请求之前显示 div 元素，在请求完成后隐藏 div 元素。
async function refreshStatus(mode) {
// 显示等待动画
document.getElementById("loading").style.display = "flex";
try {
var response = await fetch(
the_url,
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
body: JSON.stringify(dict)
}
);
const jdata = await response.json();
ldata = jdata["results_list"];
} catch (error) {
console.error("Error fetching data:", error);
// 处理错误情况，例如显示错误消息
} finally {
// 隐藏等待动画
document.getElementById("loading").style.display = "none";
}
}解释：
- document.getElementById("loading").style.display = "flex";: 将 div 元素的 display 属性设置为 "flex"，使其显示出来。 使用flex是为了让其中的内容居中显示。
- document.getElementById("loading").style.display = "none";: 将 div 元素的 display 属性设置为 "none"，使其隐藏起来。
- try...catch...finally: 使用 try...catch...finally 块来处理可能发生的错误，并在 finally 块中确保等待动画始终被隐藏，即使发生错误。
3. 添加加载动画
为了让等待提示更加友好，可以在 div 元素中添加一个加载动画。可以使用 CSS 或 JavaScript 创建加载动画，也可以使用现成的加载动画库。例如，可以使用 Font Awesome 提供的加载图标：
<div id="loading" style="position: fixed; z-index: 1000; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; justify-content: center; align-items: center; display: none; background-color: rgba(0, 0, 0, 0.5);">
<span>Wait...</span>
<i class="fas fa-spinner fa-spin fa-3x"></i>
</div>需要引入 Font Awesome 的 CSS 文件。
注意事项
- 在实际应用中，可以根据需要自定义等待动画的样式和内容。
- 确保在请求完成后及时隐藏等待动画，避免影响用户体验。
- 如果请求时间过长，可以考虑添加超时处理，并向用户显示提示信息。
- 使用 try...catch...finally 块来处理可能发生的错误，并在 finally 块中确保等待动画始终被隐藏。
- 考虑使用更高级的加载指示器库，例如NProgress或 Pace，它们提供了更丰富的定制选项和动画效果。
总结
通过创建一个全屏 div 元素，并使用 CSS 和 JavaScript 控制其显示与隐藏，可以实现在 await fetch 调用期间显示等待动画，并阻塞用户与页面的进一步交互。这种方法简单易用，可以有效地提升用户体验。 结合合适的加载动画和错误处理机制，可以创建一个更加友好和健壮的等待提示效果。
