如何解决实时更新布尔玛进度条
我正在使用Bulma和Javascript，试图实时更新进度条。我知道如何做一个不确定的栏（保持吉普车向前和向后移动），以及发生事件（例如，按下按钮）时栏开始移动的一种方法，但是无论编程了什么时间，它都只会向前移动。我希望我的栏根据实际任务（从数据库中读取记录，对其进行操作并保存结果）进行移动。如果我选择一次完成所有17,000条记录，则可能要花费80-150分钟，这就是为什么我想要一个进度条来显示正在发生的事情。我在下面提供了到目前为止的内容。
我的函数update_progress_bar是否应该工作（不起作用）？假设我实际上已经更改了进度条的值，如何在Web浏览器中进行更改呢？
如果能向我指出正确的方向，请多谢。
<html>
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>My Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"> </head>
<body> <section class="hero is-primary is-fullheight">
<div class="hero-body">
<div class="container">
<div class="box has-text-centered has-text-weight-bold has-text-link is-size-2">
My Title
</div>
<div class="columns is-5-table is-4-desktop is-3-widescreen">
<div class = "column">
<label class = "label">Progress</label>
<progress class="progress" value="20" max="100" id="myprogressBar">0</progress>
</div>
</div>
</div>
</div>
</section>
<script type='text/javascript'>
function update_progress_bar() {
var element = document.getElementById("myprogressBar");
var current_value = element.value;
element.value = current_value++; }
</script>
</body>
</html>
<?php for ($i=1; $i <=100; $i +10) { // do stuff update_progress_bar();}
解决方法
如果我理解的正确，您希望此代码根据当前任务状态实时更新浏览器中的进度条。
我看到了几种可能的解决方案：
-
最简单的。 只需每N秒以编程方式重新加载页面（就像在Jenkins中完成的一样）
-
使用
fetchAPI（长时间轮询或仅使用简单间隔）并从其他端点获取当前状态。 -
使用WebSockets。但前提是您已在项目中使用它们。如果您不这样做-最好使用
fetchAPI。
P.S。我不懂PHP。因此，这是从JS开发人员的角度来看的解决方案。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。