jQuery - 轮询作业队列答案

【问题标题】：jQuery - polling of a job queuejQuery - 轮询作业队列
【发布时间】：2010-02-02 18:36:27
【问题描述】：

我有一个包含作业队列的数据库表。一个单独的程序处理这些作业。我想提供一个网页供用户观看队列的进度。查询表并以 JSON 格式返回的服务器端脚本没有问题。

我已经阅读了一些关于 jQuery 和 PeriodicalUpdater plugin 的内容。我想知道是否可以使用这个插件来创建一个可视队列（一个基本的解释是一个单列表，队列中的每个条目都有一行），其中已经完成的作业将在下一个被删除轮询时间。正如我所说，服务器端脚本不是问题，我只是无法理解这种 UI/动画。任何进一步阅读的提示将不胜感激，或者如果我完全走错了树，也请告诉我。

提前致谢

【问题讨论】：

标签： jquery ajax polling

【解决方案1】：

我不熟悉 PeriodicalUpdater 插件，但如果我是你，我会考虑简单地使用 JavaScript 的“setTimeout”函数。 setTimeout 允许您以指定的时间间隔运行函数。

有关与您的情况相关的示例，请参见此处：

<script type="text/javascript">

setTimeout("updateTable();", 5000);

function updateTable()
{
     $.post("/your_script.php", {}, function(result) {

          $("#my_table").html(result);

     });
     setTimeout("updateTable", 5000);
}

</script>

注意：一秒有 1000 毫秒，因此该函数设计为每 5 秒触发一次。

另外...

我假设您的队列表中的每个条目都有一个与之关联的唯一 ID。在您的主 HTML 页面中，我会像这样打印出表格：

<table>
<tr id='q1'><td>Queue Item 1</td></tr>
<tr id='q2'><td>Queue Item 2</td></tr>
<tr id='q3'><td>Queue Item 3</td></tr>
<tr id='q4'><td>Queue Item 4</td></tr>
<tr id='q5'><td>Queue Item 5</td></tr>
</table>

换句话说，为您的队列表中的每一行分配与您的表中的条目相同的 ID。然后，当您的 AJAX 调用返回结果时，您可以检查是否有任何队列项目已完成。如果有，您可以执行以下操作：

$("#q1").fadeOut("fast");

【讨论】：

根据您提供的示例，我有：
我得到的 JSON 为：{"myData":[ {"REC_NO":"107045","JOB_ID":"1","JOB_TEXT":"任务 1"}, {"REC_NO":"107046","JOB_ID":"1","JOB_TEXT":"任务2"} ]} 但是 $("#jobtable").html(result) 没有创建表。

【解决方案2】：

您不需要长轮询。您只需要定期调用 ajax 来使用 setInterval 刷新队列。每次调用服务器时，都会获取整个现有队列，与当前队列进行比较，然后删除不再存在的队列：

<script type="text/javascript">
var old_result = {};
setInterval(function(){
     $.post(YOUR_URL, {}, function(result) {
       //compare result with old_result
       //remove missing elements using an animation on that row
       //set old_result to result
     });
}), 5000);

</script>

【讨论】：