Question

在我的网站上，我有一个按钮，供用户点击，表示＆＃34;同步对象＆＃34;。按此按钮将调用我的服务器启动一个过程，我调用外部系统来获取所有用户对象，并将每个对象保存到我的数据库。在发生这种情况时，我想让用户知道到目前为止已同步了多少个对象。

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

我的第一个想法是：

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

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

如何正确使用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/

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

1 个答案: