关键词：
【中文标题】基于脚本进度的动态进度条？【英文标题】：Dynamic progress bar based on progress of script? 【发布时间】：2017-11-03 06:04:29 【问题描述】：我有一个使用 webapp2 框架的 Google App Engine 应用程序，它与 MySQL 数据库交互。该应用程序的用户可以上传数据。在上传过程中，我想显示一个进度条，因为它可能需要几分钟时间。 根据我在其他主题中看到的内容（主要是：this topic 和 this one），我正在研究 JSON/Javascript 解决方案，这对我来说都是新的。
如果我传递一个随机数，进度条本身就可以工作。但是，我不知道如何从 Python 脚本中“加载”不断变化的值。
这是 HTML/CSS/Javascript：
HTML:
<div id="myProgress">
<div id="myBar"</div>
</div>
CSS:
#myProgress width: 300px;
height: 30px;
background-color: #ddd;
#myBar width: 1%;
height: 30px;
background-color: #4CAF50;
Javascript:
<script type="text/javascript">
function move()
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 1000);
function frame()
if (width >= 100)
clearInterval(id);
else
//var randomnumber = Math.floor(Math.random() * 100); --> works
var randomnumber = function update_values()
$SCRIPT_ROOT = script_root ;
$.getJSON($SCRIPT_ROOT+"/uploading",
function(data)
$("#width").text(data.width+" %")
);
; --> this is wrong I assume
var width = randomnumber;
elem.style.width = width + '%';
window.onload=move();
</script>
进度来自 Python 中的 for 循环，该循环嵌入在加载页面的脚本中。在脚本完成一项活动后，我希望将计数器的结果作为其宽度传递给进度条。对于静态变量，我使用常规的 Jinja 方式。
class UploadingpageHandler(webapp2.RequestHandler):
def get(self):
activities_list = [1,2,3,4,5,6,7,8,9,10]
counter = 0
script_root = 'localhost:10080'
for activity in activities_list:
counter = counter + 10
upload.do_stuff_in_some_function_with_MySQL()
obj =
'width': counter
self.response.headers['Content-Type'] = 'application/json' --> this
self.response.out.write(json.dumps(obj)) --> and this is wrong I assume
template_vars =
'script_root': script_root
template = jinja_environment.get_template('uploading.html')
self.response.out.write(template.render(template_vars))
如何更改脚本以使其正常工作？或者有没有更好的方法来解决这个问题？
【问题讨论】：
一个简单的带有进度条的 ajax 上传...***.com/questions/26674575/… 这个例子发布到 PHP，但有一些改动我相信它会为你工作。 感谢您的回复。不过，我仍然不确定如何更改建议的解决方案...您能否指导我更多地了解要更改哪些部分以在 javascript 中获得正确的变量？我也在寻找一种从 Python 脚本中加载值的方法。 如果你上传的东西你不需要让python传递任何东西，只要让它处理上传，我已经添加了事件监听器来监听上传的过程。所以runprogress(event) 将计算 0-100 的过程，所以如果你添加 console.log(percent) 你会看到它记录 0 到 100。uploadcomplete(event) 将在上传完成后执行，所以你可以使用它来设置状态消息并清除/重置您的进度条。至于对ajax帖子的更改，您应该能够将upload.php更改为您要使用的服务器端文件。
这对于POST 和GET 方法应该同样有效，这将计算ajax 调用的进度。
啊，我明白了。还有一个问题，以确保这将导致解决方案。用户点击“上传”后，会向另一个网站的 API 发出 python 请求。因此，上传文件的不是用户本人，就像在示例中一样，它是我想在进度条中显示的一系列请求的进度。那它还能用吗？
【参考方案1】：
您需要将“活动”的进度存储在函数之外的某个地方。
一个骇人的“解决方案”是将其存储到某种缓存解决方案中，例如带有某种时间戳/签名的 memcached 或 redis，以便您可以检索它（并使用 cron 作业类型的东西使旧条目无效） .
或者您可以全力以赴，让您的任务与 Celery 之类的东西完全异步，但我怀疑您可以在 Google App Engine 上做到这一点。
【讨论】：
谢谢！我想我以前试过芹菜。如果我没记错的话，它不适用于 GAE。 GAE 确实有自己的任务队列 (cloud.google.com/appengine/docs/standard/python/taskqueue)。这样做也一样吗？如果没有，我也会研究 memcached 和 redis... GAE 任务队列似乎正是您所需要的。因为这是一系列请求，我认为最好的解决方案确实是任务队列，但开发这是一个漫长的练习。我会权衡开发成本与进度条的实际需求。这是您网站的主要组成部分吗？如果是这样，处理这些任务（包括重试的能力等）是关键。如果不是，那么也许可以重新考虑您要从新方法中尝试做什么，或者完全放弃进度条。 一种新颖的方法是将 10 个任务（或您所称的活动）分解为 API 中的 10 个独立入口点，然后在客户端处理这些任务的“调度”而不是你现在拥有的，这是 Python 函数中的一个循环。基本上，一旦任务 1 完成（您可以通过 ajax 请求的回调触发的事件），启动任务 2。这样，您可以用开发 Python 任务队列系统的成本换取 JS 代码的复杂性（您可能失去一些功能，例如重试任务） 谢谢！重新考虑是否真的有必要是这里的关键，很好地提出这个问题:) 我认为解决方案是估计花费的时间，将该数字作为静态数字发送到模板，然后让 javascript 以设置间隔。但不是在我首先尝试获得@NewToJS 提到的 Ajax 解决方案之后shell脚本之创建彩色进度条(代码片段)
之前的博客中也有写过进度条小程序：[http://blog.csdn.net/superficial_/article/details/69787027]这次的进度条是基于shell脚本编写的，原理基本相似，不过多赘述，其代码如下：#!/bin/bashi=0str=''index=0la 查看详情
使用引导进度条的 Rails 动态数据进度条
】使用引导进度条的Rails动态数据进度条【英文标题】：Railsdynamicdataprogressbarusingbootrapprogressbar【发布时间】：2021-10-3001:01:17【问题描述】：您好，任何人都可以帮助尝试获取bootrap5进度条以显示我的会议表中的动态数据吗？Rails6... 查看详情
angularjs进度条动态宽度
】angularjs进度条动态宽度【英文标题】：angularjsprogressbardynamicwidth【发布时间】：2016-03-1111:35:24【问题描述】：我有一个图片库，其中包含一张照片、一个竖起大拇指按钮和每个项目的进度条。所有项目都仅源自一个JSON对象。我... 查看详情
基于jquery的音乐播放器进度条插件
自己基于豆瓣FM的ui仿写qq音乐时，基于Jquery手写的进度条插件，效果图如下： 主要特色： ①可自适应挂载元素的宽度，也可以自己设置进度条宽度； ②支持部分默认参数修改（具体见使用说明）；... 查看详情
如何在 shell 脚本中添加进度条？
】如何在shell脚本中添加进度条？【英文标题】：Howtoaddaprogressbartoashellscript?【发布时间】：2010-09-1906:43:00【问题描述】：在bash或*NIX中的任何其他shell中编写脚本时，在运行需要几秒钟以上的命令时，需要一个进度条。例如，复... 查看详情
长按如何使进度条变化android
参考技术A通过MediaPlayer调节。系统自带的进度条的颜色比较单调，实际开发中使用较少，可以自定义进度条背景，新建一个progressbarbg.xml文件。gradient可以设置进度条的渐变色，android：endColor和android：startColor可以设置渐变开始和... 查看详情
shell脚本实现转圈、进度条等效果
参考技术A开始shell光标闪烁通过符号#填充[]完成进度每个阶段有不同颜色区分进度按照百分比显示进度printf%3d为显示百分比预留了3位，循环条件i每次递增5主要是为了减少进度条显示的长度。i每次递增5，取模之后的index值还是... 查看详情
圆形半径的Android进度条动态变化
】圆形半径的Android进度条动态变化【英文标题】：AndroidProgressbarwithcircleradiuschangesDynamically【发布时间】：2012-02-2212:53:06【问题描述】：我想根据滑块位置更改圆半径我分别创建了这两个。同时将circle方法应用于进度条。面临错... 查看详情
ReactJS进度条使用状态动态更新？
】ReactJS进度条使用状态动态更新？【英文标题】：ReactJSprogressbardynamicallyupdatingusingstate?【发布时间】：2021-01-2720:58:29【问题描述】：我正在使用PrimeReact进度条，并希望在页面加载时动态更新它。我的代码在下面-constIntroPage=()=>... 查看详情
基于jquery的进度条实现
功能描述：顾名思义，既是形象地用柱状条长短变化表示进度变化过程的工具。如下图：实现组成：单看进度条的组成，外层是一个父标签，有一定长度，有边框，便于表现总的进度大小；里层是一个子标签，宽度为一定百分比... 查看详情
如何通过创建动态复选框来更改进度条
】如何通过创建动态复选框来更改进度条【英文标题】：Howtochangeprogressbarwithcreatingdynamiccheckboxes【发布时间】：2014-04-1314:21:00【问题描述】：我翻遍了，发现很多类似的帖子，但没有一个能真正回答我这个具体情况的问题：我想... 查看详情
shell脚本之创建彩色进度条(代码片段)
...//blog.csdn.net/superficial_/article/details/69787027]这次的进度条是基于shell脚本编写的，原理基本相似，不过多赘述，其代码如下：#!/bin/bashi=0str=''index=0label=("|""/""-""\\\\")while[$i-le10... 查看详情
从子进程调用的外部 python 脚本打印 tqdm 进度条
】从子进程调用的外部python脚本打印tqdm进度条【英文标题】：Printtqdmprogressbarfromexternalpythonscriptcalledbysubprocess【发布时间】：2021-04-0908:31:06【问题描述】：我的主要目标是通过subprocess在另一个python脚本（调用者脚本）中运行一... 查看详情
选中复选框时动态更改引导进度条值
】选中复选框时动态更改引导进度条值【英文标题】：Dynamicallychangebootstrapprogressbarvaluewhencheckboxeschecked【发布时间】：2014-02-0613:21:44【问题描述】：我正在尝试使用引导进度条制作动态清单。这是我的标记代码<divclass="progresspr... 查看详情
shell进度条怎么显示脚本执行进度
参考技术A可以用代码实现#!/bin/bashb=''i=0while[$i-le100]doprintf"progress:[%-50s]%d%%\r"$b$isleep0.1i=`expr2+$i`b=#$bdoneecho本回答被提问者采纳 查看详情
为基于 flex 框的进度条设置动画时出现一个奇怪的故障
】为基于flex框的进度条设置动画时出现一个奇怪的故障【英文标题】：Abizarreglitchwhenanimatingaflexbox-basedprogressbar【发布时间】：2019-09-1002:53:43【问题描述】：我正在尝试通过实现进度条来学习flexbox。一切正常，直到我尝试用jquery... 查看详情
进度条加载
NProgress.js NProgress是基于jquery的，且版本要 >1.8 API: NProgress.start() —启动进度条 NProgress.set(0.4) —将进度设置到具体的百分比位置 NProgress.inc() —少量增加进度 NProgress.done()&... 查看详情