jquery - 让 jQuery 等待 $.post 完成页面更新

Question

我正在调用一个函数来使用 jQuery.post 刷新当前页面的一部分 - 然后在该函数完成后，我需要执行另一个函数来更新该页面上的 Google map ，使用从$.post

我无法嵌套这些函数，因为 DoGoogleMap() 无法在 RefreshSubdivisionList() 函数的范围内工作。

如何让它等待 $.post 将更新的 HTML 写入页面，然后再调用 DoGoogleMap() 函数？

function RefreshSubdivisionList() {

    var formActionScript = jQuery("#RefreshSubdivisionForm").attr('action');

    jQuery.post(formActionScript, jQuery("#RefreshSubdivisionForm").serialize()).done(function(data) {

        jQuery(".subdivision-list").html(data).show();

    }, 'text');

    return true;

}


jQuery("#RefreshSubdivisionForm").submit(function(event) {

    event.preventDefault();
    jQuery.when( RefreshSubdivisionList() ).done(function(){
        jQuery('#map_canvas').gmap('destroy');
        DoGoogleMap();
    });

    return false;

});

Answer 1

<强> jQuery.when() 提供了处理同步多个异步调用情况的机制。看看:

function ajax1 {
    return $.ajax("/page1/action", {});
}

function ajax2 {
    return $.ajax("/page2/action", {});
}

var promise = $.when(ajax1, ajax2);

promise.done(function (resp1, resp2) {
  // The parameters resp1 and resp2 are the responses 
  // of their respective ajax1 and ajax2 calls.
  // Each parameter is an array that contains the ajax response
  // with the following signature:
  // [data, statusText, jqXHR]
  // See: http://api.jquery.com/jquery.ajax/#jqXHR

  // suppose the data response for ajax1 is: "Hello"
  // suppose the data response for ajax2 is: "world"
  var data = resp1[0] + " " + resp2[0];

  if ((/hello\sworld/i).test(data)) {
    console.info("Promises rules!");
  }
});

在前面的示例中，我们处理成功响应，但我们也可以以同样的方式处理失败响应。

jqXHR jQuery.ajax() 返回的对象实现Promise 接口(interface)，为它们提供 Promise 的所有属性、方法和行为。 (请参阅 Deferred object 了解更多信息)

另一种方法是创建 deferred对象，并用预期结果解析每个延迟对象，最后统一解析的响应:

var d1 = $.Deferred();
var d2 = $.Deferred();

$.when(d1, d2).done(function (resp1, resp2) {
    console.log(resp1); // "Fish"
    console.log(resp2); // "Pizza"
});

d1.resolve("Fish");
d2.resolve("Pizza");