[发明专利]一种基于Http循环请求的实现方法及其装置

说明书

本发明公开涉及一种基于Http循环请求的实现方法及其装置，属于网页前端UI界面控制按钮领域。本发明公开的基于Http循环请求的实现方法及其装置，包括按钮模块、进度条模块和加载状态模块，按钮模块为基础常驻模块，进度条模块为环状结构包裹住按钮模块，加载状态模块位于按钮模块中心，可以直观的展示循环发送请求的倒计时，等待请求结果的加载状态和自主重置请求发送，便于提示用户当前网页状态，优化了用户操作体验，统一进度条、加载状态、按钮三个组件，节省了页面布局空间。

技术领域

本发明涉及网页前端UI界面控制按钮领域，特别涉及一种基于Http循环请求的实现方法及其装置。

背景技术

现有的大多数网页前端UI框架中都有独立的按钮、进度条、等待状态提示功能，但是在具体应用中三者是分开使用、分开显示的，并且在大多数短时间间隔的循环请求或websocket通信中并没有请求倒计时提示，导致页面布局空间的浪费和用户的操作体验不佳。

发明内容

本发明的目的在于克服现有技术中所存在的按钮、进度条、等待状态的提示功能在应用过程中是分开使用，分开现实的，并且大多数在短时间间隔的循环请求或webspcket通信中没有请求倒计时提醒的不足，提供一种基于Http循环请求的实现方法及其装置。

为了实现上述发明目的，本发明提供了以下技术方案：

一种基于Http循环请求的实现方法，包括以下步骤：

步骤一：设定按钮模块的初始加载状态为假、倒计时模块的倒计时进度条显示为假以及倒计时剩余时间为零；

步骤二：点击按钮模块开始启动循环Http请求；

步骤三：按钮模块的加载状态设置为真，加载状态模块显示加载中状态，等待后台返回结果；

步骤四：接收到后台返回的结果后，加载状态设置为假，倒计时进度条模块显示设置为真，填充进度为100%，倒计时剩余时间重置为时间间隔初始值；

步骤五：随着倒计时剩余时间递减，倒计时进度条模块填充进度递减，在剩余时间递减为零时，倒计时进度条模块显示设置为假，重新发起Http请求，进入步骤三。

采用上述技术方案，直观的展示了请求发起间隔的倒计时，便于提示用户当前网页的状态，按钮结合了发起请求与刷新请求的功能，优化了用户的操作体验。

作为本发明的优选方案，步骤三所述的按钮模块的加载状态设置为真，显示加载中状态时，按钮模块处于禁用状态。

作为本发明的优选方案，步骤四所述的接收到后台返回的结果后，此时的按钮模块进入可用状态，所述时间间隔初始值能自定义为1s、2s或3s（初始值也可自定义为其他值）。

一种基于Http循环请求的装置，包括：

按钮模块,为基础常驻模块，用于点击按钮模块开始启动循环Http请求；

进度条模块，为环状结构，包裹住按钮模块，用于显示倒计时时间；

加载状态模块，位于按钮模块中心，用于显示按钮模块的加载状态。

采用上述技术方案，将进度条模块、加载状态模块、按钮模块三个组件进行了统一，节省了页面布局空间，直观的展示了请求发起间隔的倒计时，便于提示用户当前页面状态，优化用户操作体验。

作为本发明的优选方案,所述按钮模块为圆形，并且内部的图标能够自定义。

作为本发明的优选方案，所述进度条模块在平常状态下隐藏，在两次请求间隔以倒计时形式显示。

作为本发明的优选方案，所述加载状态模块在平常状态下隐藏，在发起请求等待后台返回结果的间隙中显示并遮盖按钮模块，此时禁用按钮模块并提示加载状态。