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

Question

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

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

我的第一个想法是:

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

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

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

Answer 1

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

尝试

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/