开发指南071-进度展示

简介: 前端发起一个比较长时间的服务,需要在前端刷新实时进度,告诉用户进展

前端发起一个比较长时间的服务,需要在前端刷新实时进度,告诉用户进展。不是假进度条,是实际的进度,例如需要更新1000条数据,则前端不断刷新 已完成数/1000

      前端发起服务,注意生成一个taskID:

import uuid from "node-uuid";

this.taskID=uuid.v1()

     生成一个定时任务this.intervalId = setInterval(() => { this.fetchProgress(); }, 3000); // 每3秒轮询一次

     向后台发起请求,传递该参数。

      后台先计算任务总数,然后向redis以该键值存储的实时进度信息,然后进入循环,边完成任务,边刷新redis。

      定时任务调后台job服务的相关接口获取进度。

      后台完成定时任务后会销毁redis数据

      前端接收到返回后,显示服务结果,同时停止定时任务。

相关文章
|
4月前
|
前端开发 JavaScript
开发指南035-刷新待办
这个问题在平台上的难点在于:待办是在门户系统里,待办的处理是在另一个独立的前端工程里,两者是跨域关系
|
7月前
|
Web App开发 缓存 运维
数据管理DMS产品使用合集之遇到通知管理点击修改后出现白屏或部分白屏的情况,一般是什么导致的
阿里云数据管理DMS提供了全面的数据管理、数据库运维、数据安全、数据迁移与同步等功能,助力企业高效、安全地进行数据库管理和运维工作。以下是DMS产品使用合集的详细介绍。
57 0
|
小程序 定位技术
记录一款基于地图标注点展示的微信小程序开发过程纪要
记录整理一款基于地图的微信小程序开发过程,主要涉及标注点展示,可视范围内标注点动态更新,标注点自定义气泡,气泡点击及气泡内容实时更新
134 0
|
8月前
|
存储 JSON 5G
短视频批量制作-常用功能
越来越多的产品选择使用短视频作为内容承载,通过对媒体素材进行简单的剪辑,即可进行使用和投放,本文基于智能媒体服务IMS,介绍短视频剪辑中的常用功能,通过对不同功能的组合,方便客户组装自己的剪辑场景,进行短视频批量合成。
236 0
短视频批量制作-常用功能
|
移动开发 JSON API
h5调起原生分享面板,展示更多功能方案
h5调起原生分享面板,展示更多功能方案
280 0
|
SQL 前端开发 JavaScript
9-点击流数据分析项目-前后端展示
文章目录 9-点击流数据分析项目-前端展示 数据库配置 执行sql文件 创建maven项目 配置pom文件
9-点击流数据分析项目-前后端展示
|
JSON 移动开发 JavaScript
快速搭建一个代码在线编辑预览工具
快速搭建一个代码在线编辑预览工具
452 0
快速搭建一个代码在线编辑预览工具
|
存储 移动开发 JSON
如何实现H5可视化编辑器的实时预览和真机扫码预览功能
所见即所得的设计理念在WEB IDE领域里一直是备受瞩目的功能亮点, 也能极大的提高** web coder的编程体验和编程效率. 笔者接下来就将对H5可视化编辑器的实时预览和真机扫码预览**功能做一次方案剖析, 为大家在设计类似产品的时候提供一些思路. 我们还是基于笔者开发的 H5-Dooring可视化编辑器作为案例来分析上述功能实现.
399 0
|
数据可视化 JavaScript 前端开发
掘金可视化智能抽奖,支持暂停和继续, 插件版
今天我们实现的是可视化智能抽奖, 还是先看效果!!!
156 0
掘金可视化智能抽奖,支持暂停和继续, 插件版