javascript - 针对不同的处理程序将不同的参数传递给 deferred.resolve()

Question

我正在尝试使用 jQuery.Deferrd 对象同步多个 ajax 回调。显然 jQuery.when 会为您处理这个问题，但是我的代码的架构方式使得 ajax 请求不会在同一方法中调用。例如，流程如下:

//按钮被点击

//模块 1 请求 html 片段并更新 DOM

//模块 2 请求不同的 html 片段并更新 DOM

我需要两个模块同时更新 DOM，这意味着我需要确保回调在两个请求返回后运行。

模块 1 和模块 2 需要能够在没有彼此的情况下存在，并且应该彼此不了解，因此不能使用 $.when(doMod1Request(), doMod2Request()).then( function () { ... }) 和回调也应该是独立的。

因此，我编写了一个围绕 ajax 的包装器，它将回调添加到延迟对象，并以与 $.when 类似的方式在 ajax 请求返回与回调次数相同的次数后解析延迟对象。延迟对象。

我的困境是 deferred.resolve() 只能使用一组参数调用，因此每个回调都会获得相同的值。

例如

var deferred = new $.Deferred();
deferred.done(function (response) {
    console.log(response); // <div class="html-snippet-1"></div>
});
deferred.done(function (response) {
    console.log(response); // <div class="html-snippet-1"></div>
});
deferred.resolve('<div class="html-snippet-1"></div>');

而我想要这样的东西:

var deferred = new $.Deferred();
deferred.done(function (response) {
    console.log(response); // <div class="html-snippet-1"></div>
});
deferred.done(function (response) {
    console.log(response); // <div class="html-snippet-2"></div>
});
deferred.resolve(['<div class="html-snippet-1"></div>', '<div class="html-snippet-2"></div>']);

这可能吗，还是我处理不当？

Answer 1

我想说这是完全有效的。假设你有独立的模块，你会这样做(有两个 promise ):

doMod1Request().done(doMod1Update);
doMod2Request().done(doMod2Update);

现在，如果您想一起执行更新并且仅当两个请求都成功时，只需编写

$.when(doMod1Request(), doMod2Request()).done(function(mod1result, mod2result) {
    doMod1Update(mod1result);
    doMod2Update(mod2result);
});

如果您使用多个参数调用解析函数，这只会变得丑陋，因为 jQuery 在那里有点不一致，并且无法真正区分多个参数和一个数组参数。

要将它们与您正在使用的发布-订阅模式分开，我建议执行以下操作:

function Combination() {
    this.deferreds = [];
    this.success = [];
    this.error = [];
}
Combination.prototype.add = function(def, suc, err) {
    this.deffereds.push(def);
    this.success.push(suc);
    this.error.push(err);
};
Combination.prototype.start = function() {
    var that = this;
    return $.when.apply($, this.deferreds).always(function() {
         for (var i=0; i<that.deferreds.length; i++)
             that.deferreds[i].done(that.success[i]).fail(that.error[i]);
         // of course we could also call them directly with the arguments[i]
    });
};

// Then do
var comb = new Combination();
window.notifyModules("something happened", comb); // get deferreds and handlers
comb.start();

// and in each module
window.listen("something happended", function(c) {
    c.add(doRequest(), doUpdate, doErrorHandling);
});