使用JQuery延迟进度和通知方法的前端/后端技术

Question

在我的网站上，我有一个供用户点击的按钮，上面写着“同步对象”。按下此按钮将调用我的服务器来启动一个进程，在该进程中，我调用外部系统来获取所有用户对象，并将每个对象保存到我的数据库中。在这种情况下，我想让用户知道到目前为止已经同步了多少对象。

这似乎是JQuery的notify和progress方法的正确用例，我以前从未使用过。

我的第一个想法是：

创建一个ajax来启动同步过程，返回promise A。在该过程开始之后，我进行了一个单独的ajax调用，每隔2秒返回promise B到一个单独的端点，该端点返回该用户当前在我的数据库中的对象总数。我使用该值来更新显示给用户的总同步计数。

这似乎不是正确的方法，因为我基本上将同步过程和进度检查视为两个独立的承诺。

如何正确使用JQuery的notify和progress方法来让用户了解同步作业的最新进展？

Answer 1

注意，利用下面的模式，可以在web worker消息事件中包装dfd.progress(fn)部分，该事件由对服务器的调用发起，消息在对象的检索和处理期间从服务器回发到页面

试一试

html

<button>Sync Objects</button>
<progress></progress>
<div></div>

js

// call an external system to get all of the users objects , 
// `requests` : users objects
var requests = [1,2,3,4,5,6,7,8,9,10];
// save user objects to database , `uo`
var uo = [];
// text notification 
var pgx = $("div");
// `progress` element notification
var progress = $("progress");
// set `progress` `max` to `requests` `length`
progress.attr({"max":requests.length, "value":0});
// jquery `deferred` object
var dfd = new $.Deferred();
// do progress stuff
dfd.progress(function(msg) {
  $(this).html(msg + " objects processed");
  progress.get(0).value = uo.length; 
    if (uo.length === requests.length) {
      // resolve `dfd` when all `requests` complete
      dfd.resolve(uo)
    }
});
// do stuff when all `uo` retrieved , processed
dfd.done(function(data) {
  pgx.append("<br><pre>" + JSON.stringify(data, null, 4))
});

$("button").on("click", function(e) {
    $.each(requests, function(key, value) {
        // call server to initiate a process
        setTimeout(function() {
            $.post("/echo/json/"
                   , {
                       json:JSON.stringify(value)
            }) 
            .always(function(data, textStatus, jqxhr) {
                if (textStatus !== "success") {
                  // handle `error` response
                  console.log(textStatus, jqxhr)
                } else {
                  // save "user object" `data` to "database" `uo`
                  uo.push(data);
                  // notify completed object retrievals , processing ,
                  // with `pgx` as `dfd` context
                  dfd.notifyWith(pgx, [uo.length])
                }
            })
         }, key * Math.floor(Math.random() * 2000))            
    })
});

jsfiddle http://jsfiddle.net/guest271314/bckmm5zx/