zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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

SAP动画应用 快速 点击 按钮 UI5 阻止
2023-09-14 09:02:36 时间

本教程前一步骤,SAP UI5 应用开发教程之一百二十二 - 在 SAP UI5 应用中使用浏览器原生的 Fetch API 发起网络请求,我们在 UI 上绘制了一个按钮,点击之后,使用 JavaScript ES6 原生的 fetch API,发送网络请求,读取百度首页的源代码。

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

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

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

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