实时更新布尔玛进度条

问题描述

我正在使用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/[email protected]/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中完成的一样）
使用fetch API（长时间轮询或仅使用简单间隔）并从其他端点获取当前状态。
使用WebSockets。但前提是您已在项目中使用它们。如果您不这样做-最好使用fetch API。

P.S。我不懂PHP。因此，这是从JS开发人员的角度来看的解决方案。

javascript progress