显示等待动画：Await Fetch 期间的用户交互阻塞

本文介绍如何在 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 元素。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

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 调用期间显示等待动画，并阻塞用户与页面的进一步交互。这种方法简单易用，可以有效地提升用户体验。 结合合适的加载动画和错误处理机制，可以创建一个更加友好和健壮的等待提示效果。

以上就是显示等待动画：Await Fetch 期间的用户交互阻塞的详细内容，更多请关注php中文网其它相关文章！