Question

我正在开发一个用户填写冗长表单的应用程序。离开每个字段后，调用客户端“save”函数，最终执行$ .ajax（）调用。发生这种情况时，字段旁边会显示一个“微调器”图标，让用户知道正在进行保存。

我的问题是，在较旧的浏览器（IE7 + 8）中，这些花费可能需要几秒钟（保存后会发生很多客户端事件 - 它们是复杂的形式，保存的响应可能会也可能不会根据他们提供的答案渲染新的表单字段。在保存期间，UI似乎锁定了一点，阻止用户与其他表单元素交互，直到保存完成。

我能够做的就是运行“保存”调用，并允许用户在网站发生时继续与网站进行交互。有没有办法让这种情况发生？这是我们正在使用的当前代码：

function saveField(reviewData, isIdField) {
    $.ajax({
        type: "POST",
        url: serviceUrl,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        processdata: true,
        success: serviceSuccess,
        error: serviceFailed
    });
}

serviceSuccess函数非常需要jQuery，并且会进行大量的UI操作。

编辑： serviceSuccess功能过于复杂，无法在SO上发布。基于评论+发布的答案，看起来我无法将其变为TRULY异步运行，但也许@surui的建议会带来一些成果。另外，我会考虑清理这些代码，无论如何我都会这样做。感谢您的回复。

Answer 1

如果我理解正确你的问题不是ajax操作，而是serviceSucess函数，因为它是同步执行的。所以如果我们看到这个函数实现，我想可以提供更好的答案。通常，您不应该在javascript中使用长同步功能。我可以建议一些事情（带警告）

假设您可以将代码划分为4

a(response);
b(response);
c(response);
d(response);

每个需要100毫秒，一起是400毫秒

如果它们可以并行运行（意思是，顺序无关紧要，在javascript中你不能并行运行）我们可以按如下方式编写它：

setTimeout(function(){
  a(response);
}, 0);

setTimeout(function(){
  b(response);
}, 0);

setTimeout(function(){
  c(response);
}, 0);

setTimeout(function(){
  d(response);
}, 0);

（或者您可以使用async.parallel）

如果它们应该连续运行，你可以使用async.series（类似于async.parallel），或普通的java脚本（只需将setTimeout -s嵌套）：

async.series({
  a: function(callback){
    a(response);
    callback();
  }
  b: function(callback){
    b(response);
    callback();
  }
  c: function(callback){
    c(response);
    callback();
  }
  d: function(callback){
    d(response);
    callback();
  }
}, function(err, results){
  // the series has ended 
});

再一次，如果我们能够以某种方式最大限度地减少dom操作，那么我所写的内容可能是一种过度杀伤。

jQuery中的并行异步请求

1 个答案: