本文介绍如何在 JavaScript 的 await fetch 调用期间显示一个全屏等待动画，从而阻塞用户与页面的进一步交互。通过创建一个覆盖整个页面的 div 元素，并利用 CSS 控制其显示与隐藏，可以实现一个简单的等待提示效果，提升用户体验。
在进行网络请求时，特别是使用 await fetch 进行异步操作时，用户可能需要等待一段时间才能看到结果。为了提升用户体验，可以在等待期间显示一个等待动画，并阻塞用户与页面的进一步交互，避免不必要的操作。
实现方法
主要思路是创建一个覆盖整个页面的 div 元素，并使用 CSS 控制其显示与隐藏。当发起 fetch 请求时，显示该 div 元素，当请求完成后，隐藏该 div 元素。
1. HTML 结构
首先，在 HTML 中添加一个 div 元素，用于显示等待动画。该 div 元素需要覆盖整个页面，并具有较高的 z-index 值，以确保其位于其他元素之上。
Wait...
解释：
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 提供的加载图标：
Wait...
需要引入 Font Awesome 的 CSS 文件。
注意事项
在实际应用中，可以根据需要自定义等待动画的样式和内容。确保在请求完成后及时隐藏等待动画，避免影响用户体验。如果请求时间过长，可以考虑添加超时处理，并向用户显示提示信息。使用 try…catch…finally 块来处理可能发生的错误，并在 finally 块中确保等待动画始终被隐藏。考虑使用更高级的加载指示器库，例如NProgress或 Pace，它们提供了更丰富的定制选项和动画效果。
总结
通过创建一个全屏 div 元素，并使用 CSS 和 JavaScript 控制其显示与隐藏，可以实现在 await fetch 调用期间显示等待动画，并阻塞用户与页面的进一步交互。这种方法简单易用，可以有效地提升用户体验。 结合合适的加载动画和错误处理机制，可以创建一个更加友好和健壮的等待提示效果。
以上就是显示等待动画：Await Fetch 期间的用户交互阻塞的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530526.html
微信扫一扫 
支付宝扫一扫 
