javascript - jQuery.post动态数据回调函数

Question

我有一个脚本需要相当多的处理时间，最多大约一分钟。该脚本调整图像数组的大小，锐化它们，最后将它们压缩以供用户下载。

现在我需要某种进度消息。我在想，使用 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";

Answer 1

更新:由于 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() 不会被意外触发两次。