是否每秒更新启动进度条

Updating Bootstrap progress bar every second?

本文关键字：启动 更新 是否      更新时间：2023-09-26

我对Javascript有点陌生，尤其是Ajax，我希望有人能帮助我度过我正在做的一个宠物项目的最后一个难关。

我有一个Ruby on Rails应用程序，它使用Bootstrap API，旨在显示网页上几个正在运行的线程的状态。每个线程都由一个ActiveRecord对象表示，该对象包含一个progress属性，该属性旨在由我的控制器在线程进程中的某些里程碑进行更新。

应用程序的各个方面都正常工作，但我需要进度条随着每个活动线程的progress属性的变化而动态更新。我尝试过javascript的setInterval方法，但奇怪的是，它似乎只在页面加载后触发一次，而不是像我指定的那样每秒钟触发一次。我读了一些关于ajax的文章，我想我理解它应该如何工作，但我有点纠结于如何将它适应我的特定应用程序。以下是我的.html.erb文件中的<div>，该文件包含进度条：

<% @all_active_threads.each do | active_thread | %>
    <div class="row">
        <div class="progress progress-striped active span6">
            <div id="progressbar<%= active_thread.thread_id %>" class="bar" style="width: <%= active_thread.progress %>%;"><%= active_thread.campaign %></div>
        </div>
    </div>
<% end %>

我看到的大多数ajax示例都谈到了将检索到的一组数据附加到页面上，或者修改div以包含它。在我的例子中，我的控制器中有一个操作，从数据库中检索所有活动线程的数组，将其转换为JSON对象，并将其呈现为JSON，我的javascript代码正确地检索这个数组。我只需要更新每个条的"宽度"属性，使其等于这个新的progress值。为了便于说明，对于两个活动线程，检索到的数组可能是这样的：

[ { id: 1, thread_id: 42, progress: 33 }, { id: 2, thread_id: 11, progress: 86 } ]

我的问题是，如果我已经编写了javascript代码来检索数组，获取进度值，并将其分配给进度条，我如何编写ajax函数来每秒执行此操作

非常感谢你的帮助！

JavaScript的setInterval方法将允许您在循环中执行一个方法。例如：

setInterval(function(){
  updateProgressBar();
},1000);
相关文章：