我有一个脚本需要相当多的处理时间,最多大约一分钟。该脚本调整图像数组的大小,锐化它们,最后将它们压缩以供用户下载。
现在我需要某种进度消息。
我在想,使用 jQuery 的 .post()
方法,来自回调函数的数据会逐渐更新,但这似乎不起作用。
在我的示例中,我只是使用一个循环来模拟我的脚本:
$(document).ready(function() {
$('a.loop').click(function() {
$.post('loop.php', {foo:"bar"},
function(data) {
$("div").html(data);
});
return false;
});
});
循环.php:
for ($i = 0; $i <= 100; $i++) {
echo $i . "<br />";
}
echo "done";
最佳答案
更新:由于 jQuery Ajax 请求具有 promise 接口(interface),因此获取进度信息要容易得多。使用这个答案:
https://stackoverflow.com/a/32272660/18771
下面的原始答案已过时(最初来自 2010 年)。它仍然有效,但比需要的更复杂。我会保留它以供引用和比较。
您需要来自服务器的某种进度信息。 ajax 回调不执行渐进式工作,它们只触发一次 - 在请求成功返回之后。
所以...在 PHP 中你需要这样的东西:
/* progress.php */
$batch_done = some_way_to_find_out_that_number();
$batch_size = some_way_to_find_out_that_number_too();
header('Content-type: application/json');
// TODO: format number
echo '{"progress":'. ($batch_size==0 ? '0' : $batch_done*100.0/$batch_size).'}';
为此,您的图像处理脚本当然必须留下一些进度证据。
在 JavaScript 中是这样的:
$(document).ready(function() {
$('a.loop').click(function() {
var queryData = {foo:"bar"};
// prepare a function that does cyclic progress checking
var progressCheck = function() {
$.getJSON(
"progress.php", queryData,
function(data) {
$("div.progress").css("width", data.progress+"%");
}
)
};
$.post(
'loop.php', queryData,
/* create the post request callback now */
function(intvalId){
return function(data) {
$("div").html(data);
clearInterval(intvalId);
}
}( setInterval(progressCheck, 1000) )
);
return false;
});
});
这部分需要一些解释:
function(intvalId){
return function(data) {
$("div").html(data);
clearInterval(intvalId);
};
}( setInterval(progressCheck, 1000) )
function(intvalId)
是一个匿名函数,它接受一个参数 - 一个区间 ID。此 ID 是停止通过 setInterval()
设置的间隔所必需的。幸运的是,对 setInterval()
的调用返回了这个 ID。
匿名外部函数返回一个内部function(data)
,这将是$.post()
的实际回调。
我们立即调用外部函数,在此过程中做两件事:使用 setInterval()
触发间隔并将其返回值(ID)作为参数传递。该参数值将在其调用时(可能是 future 几分钟)可供内部函数使用。 post()
的回调现在实际上可以停止间隔。
作为你的练习 ;)
- 修改 ajax 调用,使其在请求错误或超时时也停止间隔。目前,如果回调从未运行(并且它仅在成功时运行!),间隔将永远不会停止。
- 确保
post()
不会被意外触发两次。
关于javascript - jQuery.post动态数据回调函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2624585/