创建 jquery 承诺层次结构的指南

Question

我正在尝试延迟加载网站的一些资产。我对承诺很陌生，但在这种情况下它们似乎很有帮助。具体来说，我创建了以下方法来下载 HTML 和 CSS 文件，然后翻转一个 KnockoutJS 可观察对象，指示该部分随后可用。该方法如下所示：

function delayDownloadAssets(sectionName) {
var htmlRequest = $.ajax({ url: 'http://www.example.com/' + sectionName + '.html' }),
cssRequest = $.ajax({ url: 'http://www.example.com/' + sectionName + '.css'  });

$.when(firstRequest, secondRequest).done(function (firstResponse, secondResponse) {
    //Insert HTML assets and CSS assets into DOM
    app.sections[sectionName].enabled(true);
});
}

然后我可以多次调用该方法，例如：

delayDownloadAssets("Section1");
delayDownloadAssets("Section2");
delayDownloadAssets("Section3");

到目前为止，还不错。但我想以类似的方式包装所有三个部分的下载调用，以便我可以采取行动。类似于：

$.when(delayDownloadAssetsCall1, delayDownloadAssetsCall2,delayDownloadAssetsCall3).done(function () {
    alert('Web site download is entirely complete!');
});

我希望这个问题很清楚，但如果需要任何说明，请告诉我。谢谢！

Answer 1

为什么不直接将 3 个函数链接起来。

即第一个调用的完成函数调用第二个，第二个调用的完成函数调用第三个，最后在第三个调用的完成函数中做任何你想做的事。

更新：

到运行并行你需要异步代码。
首先创建一个全局的

var doneFlag = 0;

然后我会使用仅包含

的 done 函数使用 setTimeout 调用每个函数

doneFlag++;

然后是调用简单循环的第四个 setTimeout 函数

while(doneFlag != 3)
{
   var x = 5+5; //just to keep from crashing js 
}
//any code you want to run after complete dl of all.

Answer 2

如果您只是 return $.when 结果，它应该可以正常工作：

function delayDownloadAssets(sectionName) {
    var htmlRequest = $.ajax({ url: 'http://www.example.com/' + sectionName + '.html' }),
        cssRequest = $.ajax({ url: 'http://www.example.com/' + sectionName + '.css'  });

    //add return here
    return $.when(firstRequest, secondRequest).done(function (firstResponse, secondResponse) {
        //Insert HTML assets and CSS assets into DOM
        app.sections[sectionName].enabled(true);
    });
}

Answer 3

按照 Esailija 的指示编写 delayDownloadAssets，您可以走得更远：

function loadSections(sections) {
    return $.when.apply(null, sections.map(delayDownloadAssets));
}

调用如下：

var sections = ["Section1", "Section2", "Section3"];

loadSections(sections).then(function() {
    //Web site download is entirely complete!
});

创建 jquery 承诺层次结构的指南

Guidance for creating jquery promise hierarchy

javascript

jquery

promise

jquery-deferred