【发布时间】：2015-04-13 14:41:17
【问题描述】：
我想构建一个小型管道，允许用户选择一个文件，然后使用该文件作为输入运行多个脚本。由于其中一些脚本运行了几分钟（具体时间取决于输入文件的大小），我想显示一个进度条，该进度条基于该管道的脚本已完成的数量。
问题是我不知道如何根据管道的状态更新此进度条，希望能得到一些帮助。我先展示我使用的文件，然后更详细地解释问题。
我的html表单：
<form action="main.pl" method="post" enctype="multipart/form-data">
<input type="file" name="fileName" />
<input type="submit" value="Analyze" />
</form>
管道脚本 main.pl:
#!/usr/bin/perl
use CGI;
use strict;
#use warnings;
my $q = CGI->new;
my $fileName = $q->param('fileName');
my $progressPerc = 0;
my $numJobs = 3; #in actual script much more
my $count = 1;
system('perl', './file1.pl', $fileName);
$progressPerc = $count/$numJobs*100;
#here I want to pass $progressPerc to the progress bar
$count += 1;
system('perl', './file2.pl', $fileName);
$progressPerc = $count/$numJobs*100;
#here I want to pass $progressPerc to the progress bar
$count += 1;
system('perl', './file3.pl', $fileName);
$progressPerc = $count/$numJobs*100;
#here I want to pass $progressPerc to the progress bar
我在http://jqueryui.com/progressbar/#label 上找到了一个很好的工作进度条，如下所示（我发布了整个文件，尽管我只需要 .js 部分）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>http://jqueryui.com/progressbar/#label</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 10 );
if ( val < 99 ) {
setTimeout( progress, 800 );
}
}
setTimeout( progress, 2000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</body>
</html>
有没有什么简单的方法可以在每次更改值时将 $progressPerc 从 main.pl 传递给函数 progress()？如果只有一个调用，这可以使用 ajax 来完成，但是，我不知道如何将 ajax 用于多个调用，即动态； “动态”是指一旦 main.pl 中的 perl 脚本完成，应该将其报告给进度条，然后更新进度条。
如果没有简单的方法来做到这一点：可以以某种方式引入一个 if 子句，每 x 分钟检查一次（使用 setTimeout）是否存在这些 perl 脚本在 main.pl 中生成的输出文件，如果存在，进度条已更新，如果没有等待更长时间？如果是这样，它将如何实施？
【问题讨论】：
-
一种解决方案：将当前进度写入会话文件，这样不同的用户就不会互相踩踏对方的数据。创建另一个读取会话文件并以 JSON 对象返回当前进度的 Perl 脚本。定期向此 Perl 脚本发送 AJAX 请求以检查进度。
-
有趣的想法，非常感谢！让我们看看我是否完成了这项工作......
标签： javascript jquery ajax perl progress-bar