^转摘123. 使用 Busy Dialog 动画阻止 SAP UI5 应用按钮短时间内快速被点击

本教程前一步骤，[SAP UI5 应用开发教程之一百二十二 - 在 SAP UI5 应用中使用浏览器原生的 Fetch API 发起网络请求](https://jerry.blog.csdn.net/article/details/126558757)，我们在 UI 上绘制了一个按钮，点击之后，使用 JavaScript ES6 原生的 fetch API，发送网络请求，读取百度首页的源代码。

![图片]:(https://img-blog.csdnimg.cn/img_convert/21ec505eba236673cd2117e3b736a7d7.png)

我们每点击一次 发送请求 按钮，都会在 Chrome 开发者工具 network 面板里，观察到一个 HTTP GET 请求。那么，我们一旦短时间内快速点击该按钮，就会瞬间产生多个 HTTP 请求，如下图所示：

![图片]:(https://img-blog.csdnimg.cn/img_convert/1aa2aacca682799dc76bfaa8871eeefe.png)

在实际项目中，我们应该避免这种情况，尽量减少不必要的网络请求，从而降低对服务器的负载压力。

一种推荐的做法是，一旦按钮被点击，触发了一个网络请求发送到百度网站的过程中，我们在 SAP UI5 应用上显示一个动画效果，这个动画效果会锁住整个应用的屏幕，使用户无法进行进一步操作。当这个网络请求完成，响应返回到 SAP UI5 应用时，我们再关闭该动画，让整个界面重新可用。这样就从根本上避免了按钮在短时间内多次被点击的情形出现。

这个优化通过下面的 gif 动画效果展示：

     ===========================
    【来源： CSDN】
    【作者： 汪子熙】
    【原文链接】 https://jerry.blog.csdn.net/article/details/126569190
    声明：转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢。